getImageData返回先前上傳圖片的值不是當前

有人可以告訴我哪裏出錯了，當下面的代碼返回上一張上載圖片的值而不是當前圖片時？getImageData返回先前上傳圖片的值不是當前

<canvas id="imageCanvas"></canvas> 
    <br> 
    <input type='file' id="imageLoader" name="imageLoader"/> 
    <br>

任何想法：

var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
    var canvas = document.getElementById('imageCanvas'); 
    var ctx = canvas.getContext('2d'); 


    function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
    var img = new Image(); 
    img.onload = function(){ 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img,0,0); 
    } 
    img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]);  


    var imageWidth = canvas.width; 
    var imageHeight = canvas.height; 


    var imageData = ctx.getImageData(0,0,imageWidth,imageHeight); 
    var data = imageData.data; 

    console.log("imageWidth=" +imageWidth);

圖像是通過下面的輸入上傳？

來源

2017-10-14 Micke

''reader.onload'被異步調用，就像'img.onload' - 哎呀，也沒有看到答案 –

也是，你的代碼是隨機縮進的 –

謝謝，你也是現貨。是的，縮進是相當可怕的，我也需要解決這個問題。 – Micke

load事件FileReader和<img>都是異步的。地方

var imageWidth = canvas.width; 
var imageHeight = canvas.height; 

var imageData = ctx.getImageData(0,0,imageWidth,imageHeight); 
var data = imageData.data; 

console.log("imageWidth=" +imageWidth);

在<img>load事件處理程序。

還可以設置<input type="file">元件的.value到""從元素.files屬性中刪除當前上傳File對象引用。

來源

2017-10-14 07:13:00 guest271314

謝謝隊友！它現在像一種魅力。 =） – Micke

getImageData返回先前上傳圖片的值不是當前

回答

相關問題