Jquery 在响应图像上使用jcrop

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

    };

var jcrop_api，boundx，boundy；
$（'#target'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
aspectRatio:0.75
}，函数（）{
//使用API获得真实的图像大小
var bounds=this.getBounds（）；
boundx=边界[0]；
boundy=边界[1]；
trueSize:[900600]，
//将API存储在jcrop_API变量中
jcrop_api=这个；
});
函数updatePreview（c）{
如果（parseInt（c.w）>0）{
var rx=/c.w；
var-ry=/c.h；
$（'#预览'）.css({
宽度：数学圆（rx*boundx）+“px”，
高度：数学圆（ry*boundy）+“px”，
marginLeft:“-”+数学四舍五入（rx*c.x）+“px”，
marginTop:“-”+数学圆（ry*c.y）+“px”
});
}
$（'#x'）.val（c.x）；
$（'y'）.val（c.y）；
$（'w'）.val（c.w）；
$（'h'）.val（c.h）；
};

您可以使用truesize参数进行此操作。

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

    };


});

jQuery（函数（$）{
//创建变量（在此范围内）以保存API和图像大小
var jcrop_api，boundx，boundy；
$（'#target'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
aspectRatio:0.75，
trueSize:[，]
}，函数（）{
//使用API获得真实的图像大小
var bounds=this.getBounds（）；
boundx=边界[0]；
边界=边界[0.75]；
//trueSize:[ancho，alto]，
//将API存储在jcrop_API变量中
jcrop_api=这个；
});
函数updatePreview（c）{
如果（parseInt（c.w）>0）{
var rx=/c.w；
var-ry=/c.h；
$（'#预览'）.css({
宽度：数学圆（rx*boundx）+“px”，
高度：数学圆（ry*boundy）+“px”，
marginLeft:“-”+数学四舍五入（rx*c.x）+“px”，
marginTop:“-”+数学圆（ry*c.y）+“px”
});
}
$（'#x'）.val（c.x）；
$（'y'）.val（c.y）；
$（'w'）.val（c.w）；
$（'h'）.val（c.h）；
};
});

如果使用ajax加载图像，可以使用

getimagesize（'img.png'）

获取图像宽度/高度，然后可以在javascript代码中使用此变量

---

trueSize真的很适合我

它使用了以下代码

var width2=jQuery（'#cropbox'）.prop（'naturalWidth'）；
var height2=jQuery（'#cropbox'）.prop（'naturalHeight'）；
jQuery（'#cropbox'）.Jcrop({
方面：1，
onSelect:updateCoords，
onChange:updateCoords，
设定值：[0,011010]，
真实尺寸：[宽度2，高度2]
});我希望即使是我的答案也能帮助人们理解这个想法。假设我们在引导中使用类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>

最后，在PHP端使用rx、ry、rw和rh，而不是x、y、w和h

（或）

您只需覆盖

rx、ry、rw和rh
在…上
x、y、w和h像这样使用x、y、w和h

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

我真的不明白我该怎么做？响应图像宽度是我不知道的，因为它的宽度：css上的100%。你可以随时使用javascript请求图像宽度/高度。它不像Jcrop自己在css中查找宽度那样工作。$width2和$height2从何而来？我通过将truesize设置为以下值设法使其工作。trueSize:[oImage.naturalWidth，oImage.naturalHeight]，$width2和$height2从哪里来？@pratik是PHP代码。Elaine可能使用PHP测量图像的宽度和高度，并将其打印到JavaScript代码中。我得到错误：“ReferenceError:boundx未定义”。我很难弄清楚如何使图像响应。一旦我调用
Jcrop
，它就不再响应我了。
$('#x').val(responsiveX);
$('#y').val(responsiveY);
$('#w').val(responsiveW);
$('#h').val(responsiveH);