javascript - Canvas 中的图像预加载

Question

我正在使用 drawImage 函数在 Canvas 上绘制图像。这就是我如何设置图像的 src 属性:

var img = new Image(); // Create new Image object
img.src = 'test.php?filename=myfile.jpg'

然后

oCanvas.width = 600; oCanvas.height = 400; oContext.drawImage(img, 0, 0, 600, 400);

问题是，如果未设置 src，则会出现以下错误:“未捕获异常:[异常...”组件返回失败代码:0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]” 。我知道我收到此错误是因为图像尚未完成加载。我在调用 drawImage 函数之前添加了一个警报，以使图像完成加载并且它似乎可以正常工作。但这让脖子很痛。怎么办我检查图像是否已完成加载？顺便说一下，我必须通过调用 php 文件来设置 src 属性。

Answer 1

在设置图像的 src 属性之前定义它。

// Create new Image object
var img = new Image(); 

img.onload = function() {
    // add it to the canvas
    oCanvas.width = 600; oCanvas.height = 400;
    oContext.drawImage(img, 0, 0, 600, 400);
};

img.src = 'test.php?filename=myfile.jpg';

(需要先定义它，否则 IE7 不会触发它)。

此外，如果您想对该错误执行某些操作，请使用 JavaScript 的 try/catch。

try {
    oCanvas.width = 600; oCanvas.height = 400;
    oContext.drawImage(img, 0, 0, 600, 400);
} catch (exception) {
    alert('something went wrong!');
};