getImageDataは、現在アップロードされていないピクチャの値を返します。

Question

以下のコードは、以前のアップロードされたピクチャの値が現在のものではない場合にどこが間違っているか教えていただけますか？

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

画像は、以下の入力からアップロードされています

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

任意のアイデア？

Answer 1

loadイベントFileReaderと<img>は両方とも非同期です。 <img>loadイベントハンドラ内

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

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

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

置きます。

また、要素の.filesプロパティから現在アップロードさFileオブジェクトへの参照を削除するために""に<input type="file">要素の.valueを設定することができます。