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"])

来源

2017-04-06 Blackbird

不管怎么说，2后*** **天，我终于找到了问题 - > $。每个按钮都不会按照它们在放置区的FILES-Array中的顺序依次放置图像...所以当我剪切图像时，坐标是实际上是正确的，但我不知道的是，实际上是错误的图像上传和剪切。所以结果真的很奇怪，我很早就没有找到这个解决方案。

来源

2017-04-06 08:51:12 Blackbird

jCrop：处理不同的图像尺寸

回答

相关问题