HTML 5 canvas DrawImage fonctionnant uniquement après l'actualisation

Question

J'ai un problème avec le dessin sur le canevas, j'ai un tableau d'informations d'image que je traverse et crée des objets image à partir de. Sur chaque événement images onload je dessine sur le canevas, mais cela ne fonctionnera qu'après un rafraîchissement (une fois que les images sont dans le cache, il semble).

Voici un extrait de mon code

var image = new Image(); 
image.src = img.src; //got from elsewhere, need to draw a background image first 
image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    img.parentNode.replaceChild(canvas, img); 

    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
    context.globalCompositeOperation = 'source-over'; 

    //looping through my image info 
for (var index in anaglyphs){ 
     var anaglyph = anaglyphs[index]; 
     if (anaglyph === undefined) continue; 

     //If x, y, height and width values are set in Image then set in mask 
     //otherwise use defaults 
     var x = 0; 
     if (anaglyph.x !== undefined) x = anaglyph.x; 
     var y = 0; 
     if (anaglyph.y !== undefined) y = anaglyph.y; 
     var width = canvas.width; 
     if (anaglyph.width !== undefined) width = anaglyph.width; 
     var height = canvas.height; 
     if (anaglyph.height !== undefined) height = anaglyph.height; 
     var alpha = new Image(); 

     //Use of an intimidate function to stop javascripts closure 
     //overriding the variables before the onload event fired. Creating 
     //temporary variables in the intimidate function, which executes 
     //immediately, and storing the desired values inside them for callback. 
     (function(){ 
      var xPos = x; 
      var yPos = y; 
      var maskWidth = width; 
      var maskHeight = height; 
      alpha.onload = function() { 
       context.drawImage(this, xPos, yPos, maskHeight, maskWidth); 
      };  
     })(); 
     alpha.src = "data:"+anaglyph.content+";base64,"+encode64(anaglyph.data); 
    } 
}; 

Après un rafraîchissement, il fonctionne très bien et il continuera à fonctionner correctement si j'ouvre la page Web en utilisant à nouveau ce script, mais il échouera si j'effacer la cachez et rouvrez la page. Il suffit de travailler dans la dernière version de Firefox.

Merci

Answer 1

Essayez de mettre alpha.src dans votre fermeture:

(function (anaglyph,x,y,width,height){ 
    var xPos = x; 
    var yPos = y; 
    var maskWidth = width; 
    var maskHeight = height; 
    alpha.onload = function() { 
     context.drawImage(this, xPos, yPos, maskHeight, maskWidth); 
    };  
    alpha.src = "data:"+anaglyph.content+";base64,"+encode64(anaglyph.data); 
})(anaglyph,x,y,width,height); 

BTW, pourquoi utiliser une fermeture?

Que diriez-vous d'un simple chargeur d'image avec rappel à la place (juste un exemple):

// callback -- after all images are loaded 
function draw(images){ 
    // or whatever you want in your callback 
    context.drawImage(images.image1, 10, 10, 50,50); 
    context.drawImage(images.image2, 10, 100, 50,50); 
} 

var images = {}; 

var URLs = { 
    image1: 'ship.jpg', 
    image2: 'houseicon.png' 
}; 

LoadImages(URLs, draw); 

function LoadImages(URLs, callback) { 
    var loaded = 0; 
    var needed = 0; 
    for(var url in URLs) { needed++; } 
    for(var url in URLs) { 
    images[url] = new Image(); 
    images[url].onload = function() { 
     if(++loaded >= numImages) { 
     callback(images); 
     } 
    }; 
    images[url].src = URLs[url]; 
    } 
}