循环创建多个画布，其中包含多个图像，但并不总是显示图像

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

我认为问题在于 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);
    } 
}

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 解决方案不起作用。

如果有人能回答这个问题，那将非常受欢迎......