javascript NS_ERROR_NOT_AVAILABLE：组件不可用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17049176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NS_ERROR_NOT_AVAILABLE: Component is not available
提问by Mario Stoilov
I have a problem. I am trying to draw an image onto a canvas. The image is not from the HTML page, but on a file. Here is the code i use:
我有个问题。我正在尝试在画布上绘制图像。图像不是来自 HTML 页面，而是来自文件。这是我使用的代码：
var img = new Image();
img.src = "/images/logo.jpg";
this._canvas.drawImage(img, 300, 300);// this is line 14
now, here's the problem. This does not seem to work on Firefox and IE10 (I haven't tested yet on other browsers). On Firefox (21) I get:
现在，问题来了。这似乎不适用于 Firefox 和 IE10（我还没有在其他浏览器上测试过）。在 Firefox (21) 上，我得到：
[19:09:02.976] NS_ERROR_NOT_AVAILABLE: Component is not available @ file:///D:/Watermellon/scripts/base-classes.js:14
and on IE10 i get:
在 IE10 上我得到：
SCRIPT16389: Unspecified error.
base-classes.js, line 14 character 13
The files and their directories are:
这些文件及其目录是：
root/index.html
root/scripts/base-classes.js
root/images/logo.jpg
Now when I change the img.src to a URL (an image from another site) everything works fine, the image draws itself after a delay(for it's get from the url). What am I doing wrong?
现在，当我将 img.src 更改为 URL（来自另一个站点的图像）时，一切正常，图像会在延迟后自行绘制（因为它是从 url 获取的）。我究竟做错了什么？
回答by Ian
I'm guessing the problem is that the image isn't loaded yet before you attempt to use it. Try this:
我猜问题是在您尝试使用图像之前尚未加载图像。试试这个：
var img = new Image();
img.onload = function () {
this._canvas.drawImage(img, 300, 300);// this is line 14
};
img.src = "images/logo.jpg";
The srcproperty is set afterbinding the event because a cached image's loadevent fires immediately (which is a common problem in IE).
该src属性是在绑定事件后设置的，因为缓存图像的load事件会立即触发（这是 IE 中的常见问题）。
And according to your structure, the path to the image would probably be images/logo.jpg(removing the first /)
根据您的结构，图像的路径可能是images/logo.jpg（删除第一个/）
回答by meagar
You need to wait for the image to load before attempting to draw it into a canvas:
在尝试将其绘制到画布中之前，您需要等待图像加载：
var img = new Image();
img.src = "/images/logo.jpg";
img.onload = function () {
this._canvas.drawImage(img, 300, 300);// this is line 14
}
回答by sendler
The problem that I guess here, is when the resources be available?, but there is a way to confirm that the resources are available, just check 'complete' attribute of the image object.
我在这里猜测的问题是资源何时可用？但是有一种方法可以确认资源可用，只需检查图像对象的“完整”属性。
if (img.complete == true){
// is available.
} else {
// wait until is ready.
}
Also, you can make a merge method with onload event and a delay method that checking both stuff.
此外，您可以使用 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;
This is working for me!!! on IE and FF.
这对我有用！！！在 IE 和 FF 上。
