1

这可能是一个奇怪的解释：我想动态创建一个画布集合，其中将包含一个图像。这会显示（经过很多麻烦并摆脱了 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)
}

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

4

3 回答 3

2

我认为问题在于 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);
    } 
}
于 2012-02-04T00:51:20.553 回答
1

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

可能onload是没有调用将绘制到其他画布的 s ，因为Images 在事件触发之前正在收集垃圾。

尝试添加

var images = [];

在代码的开头和

  images.push(img);

线后img = new Image()。

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

于 2012-01-31T16:13:50.497 回答
1

我在这里找到了修复：

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

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

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

于 2012-02-03T10:49:11.700 回答