画布中的图像预加载

Question

我正在使用drawImage函数在画布上绘制一个Image。这就是我如何设置图像的src属性：

  

var img = new Image（）; //创建新的Image对象
  img.src ='test.php？filename = myfile.jpg'

然后

  

oCanvas.width = 600;     oCanvas.height = 400;     oContext.drawImage（img，0,0,600,400）;

问题是如果src没有设置，那么我得到foll错误：“未捕获的异常：[Exception ...”组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]“< / strong>。我知道我得到了这个错误，因为图像还没有完成加载。我在调用drawImage函数之前添加了一个警告，让图像完成加载，它似乎工作。但这是一个痛苦的脖子。怎么办我检查图像是否已完成加载？BTW我必须通过调用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!');
};