jquery - jCrop:处理不同的图像尺寸

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

这也很好用。用户可以剪切图像，将其发送到服务器。上传后，“CropAPI”立即获得 CropAPI.destroy()'ed。现在将显示下一个容器 (2)，并再次应用上面的代码。这也可以正常工作，直到结束。

但是:如果有 2 种不同的图像尺寸、图像分辨率或类似的东西，jCrop 会返回错误的坐标进行裁剪 - 我尽了最大努力但无法弄清楚问题到底出在哪里。还尝试了使用“trueSize”(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 ***** 天之后，我终于找到了问题 -> $.each 并没有按照它们在 dropzone 的文件数组中的相同顺序将图像一个接一个地放在那里......所以当我剪切图像时，坐标实际上是正确的，但我不知道的是实际上上传和剪切的图像是错误的。所以结果真的很奇怪，很遗憾我没有早点找到这个解决方案。