HTML 5画布DrawImage仅在刷新后工作

Question

我在绘制到画布时遇到问题，我有一组图像信息，我循环并从中创建图像对象。在每个图像 onload 事件上，我将其绘制到画布上，但这只会在刷新后起作用（一旦图像在缓存中似乎）。

这是我的代码中的一个 sn-p

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

顺便说一句，为什么要使用闭包？

如果只是一个带有回调的简单图像加载器怎么样（只是一个例子）：

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