Question

是否可以在选择框更改时设置/更新jCrop纵横比？我已经添加了一个比率和选择变量并且静态工作得很好，但是当select选择警告正确的值时，它无法使其适用于选择更改

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

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

1 个答案: