getImageData renvoie les valeurs de l'image téléchargée précédente non actuelle

Question

Quelqu'un peut-il me dire où je me suis trompé lorsque le code ci-dessous renvoie des valeurs de l'image téléchargée précédente et non celle en cours?

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

L'image est téléchargée par l'entrée ci-dessous:

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

Toutes les idées?

Answer 1

load événement de FileReader et <img> sont tous deux asynchrones. Placez

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

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

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

au sein de gestionnaire d'événements <img>load.

Vous pouvez également définir .value de l'élément <input type="file"> à "" pour supprimer la référence à l'objet courant File transféré de la propriété de .files éléments.