JCrop画像のサイズを変更しない - Javascript

Question

JCropを使用して画像を切り抜こうとしています。しかし、結果はイライラしています。誰かが画像を選択すると、JavaScriptが新たにアップロードされた画像と一致するようにページ上の画像のソースを変更する画像アップローダーがあります。私は、このコードを持っている：

$('#myForm').ajaxForm({ 
    dataType: 'json', 
    success: function (result) { 
     $("#image-editor-preview img") 
      .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random()) 
         .Jcrop({ 
          aspectRatio: 1, 
          setSelect: [100, 100, 50, 50], 
          minSize: [160, 160], 
          maxSize: [160, 160], 
          onChange: setCoords, 
          onSelect: setCoords 
         }); 
    } 
}); 

var x = 0, y = 0, w = 0, h = 0; 
function setCoords(c) { 
    x = c.x; 
    y = c.y; 
    w = c.w; 
    h = c.h; 
}; 

しかし、これは何が起こるかです：

私はこの問題を解決しようとしたかなり試してみましたが、最終結果は常に同じです。誰でもアイデアはありますか？ありがとう。

Answer 1

私はそれを理解することができました。結局のところ、JCropは、JCropボックスの幅に問題があります。 twitterのブートストラップモーダルは、JCrop CSS内のCSSをオーバーライドしています。これが起こらないようにJCropのCSSを修正しなければなりませんでした。

Answer 2

Jcropドキュメントによれば、実際にクロッピングを実行しません。画像の切り抜きUIのみが作成されます。その後、実際のクロッピングを実行するサーバーに依存します。 http://deepliquid.com/content/Jcrop_Implementation_Theory.htmlを参照してください。それで、プラグインは、それがするように設計されているものを正確に実行しているように見えます。表示されるように、残りの部分はサーバー上で自分自身を実行するようになりました。

Answer 3

私は同じ問題を抱えていましたが、なぜそれが起こったのかを知りました。私はこの定義から、幅と高さを取り除い

img { 
    width: 100%; 
    height: auto; 
    border: none; 
} 

は、プラグインが正常に機能し始めた：私のCSSファイルで

私はこのコードを持っていました。