是否可以在选择框更改时设置/更新 jCrop 纵横比？

Posted 2023-02-25

【中文标题】是否可以在选择框更改时设置/更新 jCrop 纵横比？

【英文标题】：Is it possible to set/update jCrop aspect ratio on select box change?

【发布时间】：2014-02-20 08:14:46

【问题描述】：

我添加了一个比率和选择变量，并在选择警报右值

时无法将其工作静态，但无法在选择更改中进行工作。

    jQuery(function ($) 
        var ratio = 4 / 3
        var selection = '[0,0,4,3]';
        $("#ratio").change(function () 
            var text = $(this).find(':selected').text();
            ratio = text;
            val = $(this).val();
            selection = '[0,0,' + val + ']';
            alert(ratio)
        ).trigger('change');

        // Create variables (in this scope) to hold the API and image size
        var jcrop_api,
            boundx,
            boundy,
        // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();
            console.log('init', [xsize, ysize]);

        $('#target').Jcrop(
            onChange: updatePreview,
            onSelect: updateCoords,
            setSelect: selection,
            aspectRatio: ratio
        , function () 
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        );
        $('#coords').on('change', 'input', function (e) 
            var x1 = $('#X').val(),
                y1 = $('#Y').val();
            jcrop_api.setSelect([x, y]);
        );

        function updatePreview(c) 
            if (parseInt(c.w) > 0) 
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css(
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                );
            
        ;
    );

    function updateCoords(c) 
        $('#X').val(Math.round(c.x));
        $('#Y').val(Math.round(c.y));
        $('#W').val(Math.round(c.w));
        $('#H').val(Math.round(c.h));
    ;

这是我不坚持的选择值和文本：

<select  id="ratio">
    <option value="4,3">1.3</option>
    <option value="6,3">1.6</option>
    <option value="9,3">.8</option>
</select>

【参考方案1】：

您可以通过以下方式设置纵横比：

 jcrop_api.setOptions(
    aspectRatio: yourAspectRatioValue
 ); 

在您的代码中，

$("#ratio").change(function () 
        var text = $(this).find(':selected').text();
        ratio = text;
        val = $(this).val();
        selection = '[0,0,' + val + ']';
        jcrop_api.setOptions(
        aspectRatio: ratio
        ); 
  ).trigger('change');

但是将此代码放在您在图像上应用 jCrop 的代码之后。

【讨论】：

我在代码中的任何地方都试过了，但没有使用我的变量

哦，工作了..我之前尝试过但返回错误并且没有注意它是api参考:)..谢谢

对不起，也可以添加 setSelect 吗？我使用了 setSelect: selection, aspectRatio: ratio 并且当添加为静态或从选择框添加为变量时它会转到左上角

如果你有时间，最后一个问题，抱歉。我们是否可以在更改选择时使用 updateCoords 设置输入值？或者那个（c）变量是什么？如何从 $('#target').Jcrop() 函数中的函数发送并返回 NaN。再次感谢你

问题是如何从select传递一个值并与选择数组结合....'[0,0,' + val + ']'不适合工作