HTML 5畫布DrawImage只在刷新後工作

Question

我在繪製畫布時遇到問題，我有一組圖像信息，我通過它循環並創建圖像對象。在每個圖像onload事件上，我將它繪製到畫布上，但是這隻會在刷新後才起作用（一旦圖像看起來像在緩存中）。

這裏是我的代碼

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

的一個片段，它工作正常，它會繼續正常工作，如果我再次使用該腳本打開網頁刷新後，但是如果我清除它會再次失敗緩存並重新打開該頁面。它只需要在最新版本的Firefox中工作。

感謝

Answer 1

嘗試把alpha.src你的閉包：

(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，爲什麼要用一個封閉？

如何只用回調簡單的圖像加載器，而不是（只是一個例子）：

// 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]; 
    } 
}