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（来自其他网站的图像）时，一切正常，图像会在延迟后自行绘制（因为它是从网址获取的）。我做错了什么？

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属性设置为，因为缓存图像的load事件会立即触发（这是IE中的常见问题）。

根据您的结构，图片的路径可能是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
}

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

NS_ERROR_NOT_AVAILABLE：组件不可用

3 个答案: