imagen, el evento onload no funciona en cromo

Question

Estoy usando html5 para crear la funcionalidad de carga de imágenes arrastra y suelta. Esto funciona muy bien en Firefox, pero en Chrome, el evento de carga de la imagen solo se dispara por primera vez. Si arrastro varias imágenes solo en las primeras obras, si lo arrastro, falla. Creo que el problema es con la carga de la imagen.

aquí es la forma en que mi código funciona He quitado las secciones irrelevantes:

  var img = document.createElement("img"); 
      var reader = new FileReader(); 
      var canvas = document.createElement("canvas"); 
      var canvasData; 
      var ctx = canvas.getContext("2d"); 
      var myFiles; 
      var i = 0; 


       reader.onload = (function (aImg) 
        { 
         return function (e) 
         { 
          aImg.src = e.target.result; 
         }; 
        })(img); 

     img.onload = function(){ 

     //resizes image 
     //draws it to the canvas 
     //posts to server 

     i++; 
     if(i < myFiles.length){ 
     processNext(i); 
          } 
     } 



    function processNext(filei) { 

     var file = myFiles[filei]; 

      img.file = file; 

      reader.readAsDataURL(file); 


     } 

i = 0; 
myFiles = files; 
processNext(0); 

¿alguien sabe por qué esto funciona en Firefox, pero no cromo?

Answer 1

Explicación del rastreador de cromo:

Esto no es un error. WebKit es simplemente más estricto. Usted debe crear una instancia de una imagen() objeto nuevo antes de la sustitución, así:

var photo = document.getElementById('image_id'); 
var img = new Image(); 
img.addEventListener('load', myFunction, false); 
img.src = 'http://newimgsource.jpg'; 
photo.src = img.src; 

fuente: http://code.google.com/p/chromium/issues/detail?id=7731#c12

Answer 2

Esto es extraño, ninguna de las anteriores trabajó para mí. Estaba definiendo la variable de imagen como local y la cambié a global y comenzó a funcionar. ¿Esto tiene sentido? ¿Alguien puede explicarlo?

Esto aún no ha trabajado para mí:

function loadImage() { 
    var ImageToLoad = new Image(); 
    imageToLoad.onload = function() { 
     console.log("finish loading"); 
    };   
    imageToLoad.src = "myimage.png"; 
} 

Este trabajo lo hizo:

var ImageToLoad = new Image(); 
    function loadImage() { 
    imageToLoad.onload = function() { 
     console.log("finish loading"); 
    };   
    imageToLoad.src = "myimage.png"; 
}