NS_ERROR_NOT_AVAILABLE：组件不可用答案

【问题标题】：NS_ERROR_NOT_AVAILABLE: Component is not availableNS_ERROR_NOT_AVAILABLE：组件不可用
【发布时间】：2013-06-11 16:27:34
【问题描述】：

我有问题。我正在尝试将图像绘制到画布上。图像不是来自 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 获取的）。我做错了什么？

【问题讨论】：

标签： javascript canvas

【解决方案1】：

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

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

src 属性是在在绑定事件之后设置的，因为缓存图像的 load 事件会立即触发（这是 IE 中的常见问题）。

根据您的结构，图像的路径可能是images/logo.jpg（删除第一个/）

【讨论】：

@MarioStoilov 那么这意味着它没有找到图像。所以这实际上并不能解决问题，它只是将其设置为正常工作。尝试使用img.src = "images/logo.jpg"; - 注意我在字符串开头遗漏的/
是的，我注意到了，但在你回复之前删除了我的评论：/。无论如何谢谢
您好，我的代码有同样的问题，但错误仅出现在 firefox 浏览器中。它在其他所有浏览器中工作的位置。火狐有什么特殊情况吗？我已经尝试过这段代码，但仍然没有得到任何结果。如果可能，请帮助我。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我猜这里的问题是资源何时可用？但是有一种方法可以确认资源可用，只需检查图像对象的“完成”属性即可。

if (img.complete == true){
   // is available.
} else {
   // wait until is ready.
}

此外，您可以使用 onload 事件和延迟方法创建一个合并方法来检查这两个东西。

var img = new Image();
//first attach handler
img.onload = function(e){
   if (e.target.complete == true) {
            yourHandler(e);
        } else {               
            var maxTimes = 10;
            var countTimes = 0;
            function retryLoadImage() {
                setTimeout(function () {
                    if (countTimes > maxTimes) {
                        // -- cannot load image.
                        return;
                    } else {
                        if (e.target.complete == true) {
                            yourHandler(e);
                        } else {
                            retryLoadImage();
                        }
                    }
                    countTimes++;
                }, 50);
            }; 
        }
};
img.src = yourSource;

这对我有用！！！在 IE 和 FF 上。

【讨论】：