如何在fileupload之後設置JQuery JCrop預覽進行裁剪？

我正在使用JCrop jQuery庫，我使用HTML文件控件上傳文件後提供圖像預覽。如何在fileupload之後設置JQuery JCrop預覽進行裁剪？

視圖部分（演示數據）

<input type="file" id="photograph" /> 
<img src="#" id="target" />

Javascript代碼

// for setting img src 
function readURL(input) { 
    console.log("readURL"); 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#target').attr('src', e.target.result); 
      console.log("inside if =>"+e.target.result);  
     } 

     console.log("outside IF"); 
     reader.readAsDataURL(input.files[0]); 

    } 
} 

// for setting pre-selected cropping area 
function setProperties(){ 
    console.log("set properties"); 

    $('#target').Jcrop({   
       setSelect: [0,12,23,43] 
     }); 

} 

// on change event for fileupload 
$("#photograph").change(function(){ 
    console.log("change event called!"); 
    readURL(this); 
    setProperties(); 
});

輸出

change event called! 
readURL 
outside IF 
set properties 
inside if=>data:image/jpeg;base64,/9j/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdC…sXK2t+4UdmuSVl64hb2gMHh1Nhm83DAdQJniIM6eZUxzuYCR2my3FSwGpVbzBdwlgrrc/

我要上傳的圖像文件後，設置一些屬性，但「裏面，如果=>「[見上面發佈的輸出]在最後被調用。那爲什麼會這樣呢？我應該如何解決這個問題？

來源

2016-01-06 piechuckerr

這是因爲'reader.onload'它需要時間來加載源圖像之後調用setProperties。在'onload'內設置屬性，這樣可以很好地工作。 –

那麼解決這個問題有什麼竅門？ – piechuckerr

在'reader.onload'內調用'setProperties（）'。 –

你設置好的圖像source和圖像loaded

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

     reader.onload = function (e) { 
      $('#target').attr('src', e.target.result); 
      console.log("inside if =>"+e.target.result); 
      // Call after source setted and image file loaded 
      setProperties();  
     } 

     console.log("outside IF"); 
     reader.readAsDataURL(input.files[0]); 

    } 
}

來源

2016-01-06 06:20:05

如何在fileupload之後設置JQuery JCrop預覽進行裁剪？

回答

相關問題