jCrop：处理不同的图像尺寸答案

【问题标题】：jCrop: Handle different image sizesjCrop：处理不同的图像尺寸
【发布时间】：2017-04-06 06:40:05
【问题描述】：

很久以前，我在 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"])

【问题讨论】：

标签： jquery css image twitter-bootstrap jcrop

【解决方案1】：

无论如何，经过 2 ***** 天后，我终于找到了问题 -> $.each 并没有按照它们在 dropzone 的 FILES-Array 中的相同顺序将图像一个接一个地放在那里...因此，当我剪切图像时，坐标实际上是正确的，但我不知道实际上上传和剪切的是错误的图像。所以结果真的很奇怪，很遗憾我没有早点找到这个解决方案。

【讨论】：