javascript - Internet Explorer 9 中的 HTML5 Image.onload 竞争条件

Question

我在 stackoverflow 上发现了关于 IE 9 和将图像绘制到 HTML5 cnavases 的类似计时问题，但没有一个与我的完全匹配。

我遇到了一个问题，即定期调用图像的 onload 函数，但它仍未准备好绘制到 Canvas 上。 ( Canvas 保持空白)。在 onload 中，图像的“完整”属性始终为真，“宽度”和“高度”属性始终包含预期值。没有异常被抛出。如果我在将图像绘制到 Canvas 之前在 onload 中稍作延迟，我将永远不会得到空白图。我还可以将另一个绘制图像的尝试与鼠标单击等事件联系起来，这总是成功的。我在 Chrome 或 Firefox 中没有观察到这一点。我很欣赏任何见解。谢谢!

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;

var context = canvas.getContext("2d");

var image = new Image();

image.onload = function()
{   
    // this.complete always true here
    // A delay here seems to guarantee the draw will succeed
    context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    // If the canvas is still blank, a later call to context.drawImage with this image will succeed

}

image.src = "some.png";

Answer 1

我没看到您将 Canvas 附加到正文的位置——这是故意的吗？

无论如何，尝试将 createElement 放入 onload

这会让事情一直都很好吗？

    var canvas;
    var context;

    var image = new Image();

    image.onload = function()
    { 
        canvas = document.createElement('canvas');
        canvas.width = 640;
        canvas.height = 480;
        document.body.appendChild(canvas);
        context = canvas.getContext("2d");

        context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-6.jpg";