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：處理不同的圖像尺寸

回答

相關問題