图像预加载在画布中

Question

我正在使用drawImage函数在画布上绘制图像。这是林如何设置图像的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然后我得到FOLL错误：” 未捕获的异常：[异常...]组件返回失败代码：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!'); 
};