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

Question

是否可以在选择框更改时设置/更新 jCrop 纵横比？我已经添加了一个比率和选择变量并且静态工作正常但是无法让它在选择更改时工作而选择提醒正确的值

    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>

Answer 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 的代码之后。