Question

当我尝试使用来自屏幕外画布的图像在可见画布上绘图时，我会遇到奇怪的错误，并且在我以某种方式重新加载页面之前图像不会被绘制。

这是我的示例代码。插入任何小图像文件。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <canvas id="visible canvas" width=800 height=600></canvas>
    <script>
        // load the image
        var img = new Image();
        img.src = "smallimage.png";

        // create a hidden canvas, exactly the size of our small image
        var hidden_canvas = document.createElement("canvas");
         hidden_canvas.width = img.width;
         hidden_canvas.height = img.height;
        var hidden_context = hidden_canvas.getContext("2d");        

        // draw the image on the hidden canvas
        hidden_context.drawImage(img, 0, 0);

        // set up the visible canvas
        var visible_canvas = document.getElementById("visible canvas");
        var visible_context = visible_canvas.getContext("2d");

        // draw on the visible canvas using the image from the hidden canvas
        visible_context.drawImage(hidden_canvas,0,0);
    </script>
</body>
</html>

在Firefox中，我第一次加载页面时，我得到一个空白页面并在Firebug中出现此错误： InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable。它说错误在最后一行：visible_context.drawImage(hidden_canvas,0,0);

然后我刷新页面，它正常工作。

在Chrome中，我也会得到一个空白页面（没有错误）。如果我在地址栏中按Enter键，它会再次加载并正常工作。

我尝试从本地服务器运行，但我仍然得到相同的结果。

有人可以帮我理解这个问题吗？为什么我第一次加载页面时它不会起作用？

Answer 1

这是因为在图像有时间加载之前，其余代码正在运行。它适用于重新加载，因为图像被缓存，因此立即加载。

使用iamge的 onload 属性设置加载事件侦听器并在图像准备就绪时执行代码

var img = new Image();
img.onload = function(){
    // create a hidden canvas, exactly the size of our small image
    var hidden_canvas = document.createElement("canvas");
    hidden_canvas.width = img.width;
    hidden_canvas.height = img.height;
    var hidden_context = hidden_canvas.getContext("2d");        

    // draw the image on the hidden canvas
    hidden_context.drawImage(img, 0, 0);

    // set up the visible canvas
    var visible_canvas = document.getElementById("visible canvas");
    var visible_context = visible_canvas.getContext("2d");

    // draw on the visible canvas using the image from the hidden canvas
    visible_context.drawImage(hidden_canvas,0,0);    
};

img.src = "http://placehold.it/250x250";

JSFiddle Demo;

从屏幕外画布上绘制可见画布

1 个答案: