Question

很久以前我在Bootstrap-Modal中使用了jCrop，能够在上传之前裁剪图像。一切都很好，但最近我有一个不同的任务。

任务是创建一个Dropzone，用户可以根据需要删除任意数量的图像文件。文件应该以另一种模式显示在ein 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;
    });

这也很好用。用户可以剪切图像，将其发送到服务器。在上传之后，＆＃34; CropAPI＆＃34;得到CropAPI.destroy（）＆＃39; ed。现在将显示下一个容器（2），并再次应用上述代码。这也很好，直到最后。

但是：如果有2种不同的图像大小，图像分辨率或类似的东西，jCrop会返回错误的坐标来裁剪 - 我尽力而为但无法确定问题的确切位置。还尝试了不同的解决方案＆＃34; trueSize＆＃34; （jCrop文档），但没有任何帮助。

真的希望有人可以帮助我。非常感谢提前！

您可以在此处找到最小的示例：Example

在浏览器控制台中使用以下代码，您可以显示裁剪区域的坐标：

console.log("X: " + CropAPI.tellSelect()["x"] + "\n Y: " + CropAPI.tellSelect()["y"] + "\n H: " + CropAPI.tellSelect()["h"] + "\n W: " + CropAPI.tellSelect()["w"])

Answer 1

无论如何，在2 *****天之后，我终于找到了问题 - ＆gt; $ .each不会将图像一个接一个地按照它们在dropzone中的FILES-Array中的顺序放在那里...所以当我剪切图像时，坐标实际上是正确的，但我不知道的是实际上是错误的图像被上传和剪切。所以结果真的很奇怪，我很尴尬，我之前没有找到这个解决方案。

jCrop：处理不同的图像尺寸

1 个答案: