jCrop:处理不同的图像尺寸
问题描述:
很久以前,我在Bootstrap-Modal中使用了jCrop,以便能够在上传图像之前裁剪图像。一切工作正常,但最近我有一个不同的任务。jCrop:处理不同的图像尺寸
的任务是创造一个悬浮窗在那里,他希望用户能够下降,因为许多图像文件。这些文件应该以另一种模式显示在e-Image-Tage中。一切工作正常,直到这里。
因此,让我们假设用户放下5个图像文件。结构看起来像这样。
<div class="modal-body">
<div class="CropContainer1">
<img class="ImgCropObject" src="data:image/jpeg....">
</div>
<div class="CropContainer2">
<img class="ImgCropObject" src="data:image/jpeg....">
</div>
<div class="CropContainer3">
<img class="ImgCropObject" src="data:image/jpeg....">
</div>
<div class="CropContainer4">
<img class="ImgCropObject" src="data:image/jpeg....">
</div>
<div class="CropContainer5">
<img class="ImgCropObject" src="data:image/jpeg....">
</div>
</div>
现在第一个图像将使用jCrop使用以下代码进行初始化。
$('.CropContainer' + (ElemNow)).find(".ImgCropObject").Jcrop({
boxWidth: 570,
boxHeight: 450,
aspectRatio: 16/9,
setSelect: [0,0,300,300],
bgOpacity: .4,
minSize: [300,300],
onSelect: function(){
CropSelectorSet = true;
},
onRelease: function(){
CropSelectorSet = false;
}
}, function(){
CropAPI = this;
});
这也工作得很好。用户可以剪切图像,将其发送到服务器。在上传之后,“CropAPI”获得CropAPI.destroy()'ed。现在将显示下一个容器(2),并再次应用上述代码。这也很好,直到最后。
但是:如果有2个不同的充图像大小,图像分辨率或类似的东西,jCrop返回错误的坐标作物 - 我已经尽了全力,但无法找出其中的问题到底是。还用“trueSize”(jCrop Documentation)尝试了不同的解决方案,但没有任何帮助。
真的希望有人能帮助我。首先十分感谢!
你可以找到一个小例子,在这里:Example
在浏览器控制台中使用下面的代码可以显示裁剪区域的坐标:
console.log("X: " + CropAPI.tellSelect()["x"] + "\n Y: " + CropAPI.tellSelect()["y"] + "\n H: " + CropAPI.tellSelect()["h"] + "\n W: " + CropAPI.tellSelect()["w"])
答
不管怎么说,2后*** **天,我终于找到了问题 - > $。每个按钮都不会按照它们在放置区的FILES-Array中的顺序依次放置图像...所以当我剪切图像时,坐标是实际上是正确的,但我不知道的是,实际上是错误的图像上传和剪切。所以结果真的很奇怪,我很早就没有找到这个解决方案。