循环创建具有多个图像的多个画布并不总是显示图像答案

【问题标题】：loop to create multiple canvas with multiple images not always displaying images循环创建具有多个图像的多个画布并不总是显示图像
【发布时间】：2012-01-30 23:20:25
【问题描述】：

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

这是一个sn-p的代码：

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

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

【问题讨论】：

您必须使用 onload 事件，否则无论您的图像是否已加载，这都是一个竞争条件。您可能只是在以前的代码中遇到了错误。
刚刚尝试使用 onload 并且仅显示最后一个图像，其他图像未显示，即使创建了画布以将它们显示到...

标签： javascript html canvas for-loop drawimage

【解决方案1】：

我认为问题在于 var 上下文在 img.onload 事件被触发之前被覆盖。 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);
    } 
}

【讨论】：

好吧，它并没有真正发挥作用......来自 mozilla developerper 网络的示例确实起到了作用！

【解决方案2】：

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

可能是因为Images 在事件触发之前正在收集垃圾，所以不会调用将绘制到其他画布的onloads。

尝试添加

var images = [];

在代码的开头和

  images.push(img);

img = new Image() 行之后。

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

【讨论】：

我尝试了解决方案一，它会在最后一个画布上显示所有图像（一个在其他画布上），然后我尝试了解决方案二并且什么都不会显示，但我终于找到了解决方案（我将在下一篇文章中包含）

【解决方案3】：

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

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

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

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

【讨论】：