NS_ERROR_NOT_AVAILABLE:组件不可用

Question

我有个问题.我试图在画布上绘制图像.图像不是来自HTML页面,而是来自文件.这是我使用的代码:

var img = new Image();
img.src = "/images/logo.jpg";
this._canvas.drawImage(img, 300, 300);// this is line 14

现在,这是问题所在.这似乎不适用于Firefox和IE10(我还没有在其他浏览器上测试过).在Firefox(21)上,我得到:

[19:09:02.976] NS_ERROR_NOT_AVAILABLE: Component is not available @ file:///D:/Watermellon/scripts/base-classes.js:14

在IE10上,我得到:

SCRIPT16389: Unspecified error. 
base-classes.js, line 14 character 13

文件及其目录是:

root/index.html  
root/scripts/base-classes.js  
root/images/logo.jpg 

现在,当我将img.src更改为URL(来自另一个站点的图像)时,一切正常,图像在延迟后自行绘制(因为它是从URL获取的).我究竟做错了什么？

Answer 1

我猜测问题是在您尝试使用之前图像尚未加载.试试这个:

var img = new Image();
img.onload = function () {
    this._canvas.drawImage(img, 300, 300);// this is line 14
};
img.src = "images/logo.jpg";

绑定事件后src设置该属性,因为缓存的图像事件立即触发(这是IE中的常见问题).load

根据你的结构,图像的路径可能是images/logo.jpg(删除第一个/)

Answer 2

在尝试将其绘制到画布中之前，您需要等待图像加载：

var img = new Image();
img.src = "/images/logo.jpg";
img.onload = function () {
  this._canvas.drawImage(img, 300, 300);// this is line 14
}