jquery - 在响应式图像上使用 jcrop

Question

因为 jcrop 现在在触摸屏上工作，所以我想做一个使用它的网络应用程序。我已经完成了所有工作，但是如果我尝试使设计响应式以便用户可以在裁剪之前看到整个图像(它的宽度是屏幕的百分比)，那么裁剪区域将与选择的区域不同用户。在调整大小后的图像顶部所做的选择的坐标将与全尺寸图像上的坐标不匹配。

Jcrop 包含一个类似问题的解决方案(在处理大图像时)，方法是使用框大小调整或 truesize 方法，但如果图像宽度基于百分比而不是给定的像素宽度，则它们都不起作用。

我能想到的唯一解决方案是使用媒体查询调整图像大小，并根据屏幕宽度制作 3 或 4 个版本，但我宁愿坚持基于百分比的调整大小，因为它看起来好多了。

这是我的 jcrop 调用:

      var jcrop_api, boundx, boundy;
    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 0.75
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        trueSize: [900,600],
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });
            function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').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'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };

Answer 1

TrueSize 最终成功了，我没有正确使用它:

jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api, boundx, boundy;

    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 0.75,
        trueSize: [<?echo $width2;?>,<?echo $height2;?>]
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[0.75];
        //trueSize: [ancho,alto],
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });

    function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').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'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };


});