Javascript NS\u错误\u不可用：组件不可用

我有个问题。我试图在画布上画一幅图像。图像不是来自HTML页面，而是位于文件中。以下是我使用的代码：

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

现在，问题来了。这在Firefox和IE10上似乎不起作用（我还没有在其他浏览器上测试过）。在Firefox（21）上，我得到：

在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获取的）。我做错了什么？

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

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

---

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

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

（删除第一个

/

）

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

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

此外，您还可以创建一个带有onload事件的merge方法和一个检查这两种内容的delay方法

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上。

@Mariostilov那么这意味着它找不到图像。因此，这并不能真正解决问题，它只是将其设置为正常工作。尝试使用

img.src=“images/logo.jpg”-注意我在文章开头漏掉的
/
是的，我注意到了，但在你回复之前删除了我的评论：/。Thx无论如何你好，我的代码也有同样的问题，但错误只出现在firefox浏览器中。当它在其他所有浏览器中工作时。firefox有什么特殊情况吗。我已经尝试过这个代码，但仍然没有得到任何结果。如果可能的话，请帮助我。
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;