Question

这可能是一个奇怪的解释：我想动态创建一个画布集合，其中包含一个图像。这显示（经过很多麻烦和摆脱onload事件）但当我尝试刷新页面时，我有时在屏幕上什么都没有。当我使用onload事件时（等到图像加载），它将不会显示或显示最后一个画布中的所有内容。

以下是代码片段：

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image()
    img.src = sources[i]
    canvas  = document.createElement('canvas')
    $(canvas).attr('id', i)
    canvas.height=300
    canvas.width=200
    var context = canvas.getContext('2d');
    //onload commented out allows expected display
    //img.onload = function() {
    context.drawImage(img, 0, 0);
    //} 
    divCanvas.appendChild(canvas)
}

我看过许多看起来像我的帖子并尝试了很多，但无济于事。

Answer 1

我认为问题是在触发img.onload事件之前会覆盖var上下文。 img.onload事件仅引用全局范围。这就是为什么只显示最后一张图像的原因。您需要在事件中找到正确的上下文。

我无法直接测试您的代码，但我认为它应该是这样的：

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image();
    img.src = sources[i];
    img.id = i; //Allow img to remember its corresponding canvas/context
    canvas  = document.createElement('canvas');
    $(canvas).attr('id', i);
    canvas.height=300;
    canvas.width=200;
    var context = canvas.getContext('2d');
    divCanvas.appendChild(canvas);

    img.onload = function() {
        //Use the image id to get the correct context
        var canvas = document.getElementById(this.id);
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0);
    } 
}

Answer 2

要获得一致的行为，您必须使用onload。如果不这样，画布绘图代码可能会在加载图像之前执行，并且不会绘制所需的图像。

可能是因为onload在事件发生之前收集了垃圾而导致其他画布的Image被调用。

尝试添加

var images = [];

代码的开头和

  images.push(img);

img = new Image()行之后。

如果这不起作用，请先尝试将这些图像添加到DOM树 - img.setAttribute('style', 'display: none')，这样您就不会看到它们，也不会干扰文档结构。

Answer 3

我在这里找到了解决方法：

https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Drawing_images

显然他们已经放弃了img.onload，以便在主体完成加载时调用该函数。虽然，我仍然不明白为什么我的脚本或ellisbben解决方案无法正常工作。

如果有人作为答案，那将非常受欢迎......

循环创建多个图像，多个图像并不总是显示图像

3 个答案: