如何在上傳前獲取圖像的作物座標？

Question

我試圖讓Jcrop插件在用戶通過點擊瀏覽按鈕選擇圖片後工作，我們可以通過使用​​加載圖片的預覽，但我可以顯示預覽，但是當我初始化Jcrop時change事件瀏覽按鈕，它不起作用。以下是代碼。

表

<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(); 
}); 

在上面的Javascript代碼，當我加入$("#blah").Jcrop();，預覽不工作，我得到一個黑色的線來代替。我創建了一個小提琴演示相同http://jsfiddle.net/LvsYc/8230/

請幫忙！

Answer 1

嘗試移動Jcrop調用內部FileReader.onload回調像這樣（我想在你的提琴內部FF，它工作正常）

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); 
});