アップロード前に画像のトリミング座標を取得する方法は？

Question

私は​​を使用して画像のプレビューを読み込み、プレビューを表示することができますが、初期化時にJcropchangeイベントでプレビューを表示できます。ブラウズボタンの、それは動作しません。以下はコードです。上記のJavaScriptコードで

フォーム

<form id="form1" runat="server"> 
    <input type='file' id="imageInput" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

Javascriptを

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imageInput").change(function(){ 
    readURL(this); 
    $("#blah").Jcrop(); 
}); 

私は$("#blah").Jcrop();を追加していたときに、プレビューは動作しませんし、私の代わりに黒のラインを取得します。私は同じことを示すためにフィドルを作成しましたhttp://jsfiddle.net/LvsYc/8230/

助けてください！

Answer 1

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
      $("#blah").Jcrop(); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imageInput").change(function(){ 
    readURL(this); 
}); 

（私はあなたのフィドル内部のFFでそれを試してみましたが、それが正常に動作します）このよう FileReader.onloadコールバック内 Jcropコールを移動してみてください