在响应式图片上使用jcrop

Question

现在jcrop已经可以在触摸屏上使用，我想做一个使用它的Web应用程序。我已经将所有东西都搞定了，但如果我尝试使设计响应式，以便用户在裁剪之前可以看到整个图像（其宽度是屏幕的百分比），则裁剪区域将与用户选择的不同。在调整大小的图像上进行选择的坐标将无法匹配完整大小图像上的坐标。

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);

    };

- Elaine Marley

---

我很难弄清楚如何使图像具有响应性。一旦我调用Jcrop，它就不再对我具有响应性。 - Dex

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);

    };


});

- Elaine Marley

---

$width2和$height2是从哪里得来的？ - henrywright

我通过将truesize设置为以下值来使其正常工作。 trueSize: [oImage.naturalWidth,oImage.naturalHeight] - Tomeh

$width2和$height2从哪里来？ - pratik

@pratik <?echo $width2;?> 是 PHP 代码。Elaine 可能使用 PHP 测量图像的宽度和高度，并在 JavaScript 代码中打印出来。 - bart

我收到了错误信息："ReferenceError: boundx未定义"。 - bart

为什么需要 $width 和 $height 以及 $width2 和 $height2？ - DobotJr

Answer 2

我希望即使是我的回答也能帮助人们理解。假设我们在Bootstrap中有一个响应式图像，其类名为img-responsive。

以下是带有图像的HTML表单。

<form method="POST" action="#" enctype="multipart/form-data">
      <img  class="img-responsive" id="get-profile-img" src="image.jpg"/>
      <input id="x" name="x" type="hidden" value="">        
      <input id="y" name="y" type="hidden" value="">        
      <input id="w" name="w" type="hidden" value="">        
      <input id="h" name="h" type="hidden" value="">        

      <input id="rx" name="rx" type="hidden" value="">        
      <input id="ry" name="ry" type="hidden" value="">        
      <input id="rw" name="rw" type="hidden" value="">        
      <input id="rh" name="rh" type="hidden" value="">        
</form>

这里是JCrop代码，将根据对x、y、w和h的计算得到rx、ry、rw和rh。

$(function() {
    $('#get-profile-img').Jcrop({
            onSelect: updateCoords,
            aspectRatio: 1,
            setSelect  : [50, 0, 300,300],
            allowResize: true
        });
    });
    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
       responsiveCoords(c, '#get-profile-img');
    };

    function responsiveCoords(c, imgSelector) {

        var imgOrignalWidth     = $(imgSelector).prop('naturalWidth');
        var imgOriginalHeight   = $(imgSelector).prop('naturalHeight');

        var imgResponsiveWidth  = parseInt($(imgSelector).css('width'));
        var imgResponsiveHeight = parseInt($(imgSelector).css('height'));                

        var responsiveX         = Math.ceil((c.x/imgResponsiveWidth) * imgOrignalWidth);
        var responsiveY         = Math.ceil((c.y/imgResponsiveHeight) * imgOriginalHeight);

        var responsiveW         = Math.ceil((c.w/imgResponsiveWidth) * imgOrignalWidth);
        var responsiveH         = Math.ceil((c.h/imgResponsiveHeight) * imgOriginalHeight);

        $('#rx').val(responsiveX);
        $('#ry').val(responsiveY);
        $('#rw').val(responsiveW);
        $('#rh').val(responsiveH);

};

最后，在PHP端使用 rx、ry、rw 和 rh 替代 x、y、w 和 h。

(或)

你可以简单地覆盖 x、y、w 和 h，改为使用 rx、ry、rw 和 rh，然后像往常一样使用 x、y、w 和 h。

$('#x').val(responsiveX);
$('#y').val(responsiveY);
$('#w').val(responsiveW);
$('#h').val(responsiveH);

- Mohammed Samiullah

Answer 3

用以下代码可以实现

var width2  = jQuery('#cropbox').prop('naturalWidth');
var height2 = jQuery('#cropbox').prop('naturalHeight');

jQuery('#cropbox').Jcrop({
  aspectRatio: 1,
  onSelect: updateCoords,
  onChange: updateCoords,
  setSelec: [0,0,110,110],
  trueSize: [width2,height2]
});

- AirKoKo

Answer 4

你可以使用 truesize 参数来实现此功能。

- Tosh

---

我真的不太明白我应该怎么做？响应式图片的宽度是我不知道的，因为它在CSS中是width:100%。 - Elaine Marley

你可以随时使用JavaScript查询图像的宽度/高度。 - Kristian

它不是这样工作的，Jcrop会自己查找CSS中的宽度。 - Elaine Marley

Answer 5

如果您通过ajax加载图像，则可以使用getimagesize（'img.png'）获取图像的宽度/高度，然后您可以在JavaScript代码中使用此变量。

对我来说，trueSize真正起作用。

- Kai Hillebrand