jCrop：異なるイメージサイズを扱う

Question

かなり前に、イメージをアップロードする前にトリミングできるように、私はブートストラップモードでjCropを使用しました。すべてうまくいきましたが、最近少し仕事がありました。

タスクは、ユーザーが希望する数の画像ファイルをドロップできるDropzoneを作成することでした。ファイルは、別のモーダルでイメージ・テージで表示する必要があります。ここまではすべてうまくいく。

したがって、ユーザーが5つの画像ファイルをドロップすると仮定します。構造はこのように見えるでしょう。

ここで、最初のイメージは、次のコードを使用して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（）を取得します。次のコンテナ（2）が表示され、上記のコードが再度適用されます。これはまた、最後まで、うまく動作します。

しかし、2つのイメージサイズ、イメージ解像度などがある場合、jCropは間違った座標をクロップに返します。私はベストを尽くしましたが、問題の正確な位置を特定できません。また、 "trueSize"（jCrop Documentation）を使用してさまざまなソリューションを試しましたが、何も助けにはなりませんでした。

本当に誰かが私を助けてくれることを願っています。ありがとうございました！

あなたがここに最小限の例を見つけることができます：あなたは作物面積のCOORDS表示することができ、あなたのブラウザのコンソールに次のコードを使用してExample

：2の後、とにかく

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

Answer 1

を*** ** days、私はついに問題を発見しました - > $。各画像は、dropzoneのFILES-Arrayと同じ順序で次々に画像を置くわけではありません。実際には正しいですが、わたしが知らなかったのは、実際に間違った画像がアップロードされ、カットされているということです。だから結果は本当に奇妙で、私はこの解決策を早く見つけられなかったのは残念です。