CODEWITHSUNDEEP
javascriptcanvas
Mario Stoilov
Mario Stoilov

Reputation: 3447

NS_ERROR_NOT_AVAILABLE: Component is not available

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:

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: 

[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: 

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?

Upvotes: 26

Views: 61952

Answers (3)

sendler
sendler

Reputation: 41

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.

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.

Upvotes: 0

Ian
Ian

Reputation: 50923

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 src property is set after binding the event because a cached image's load event fires immediately (which is a common problem in IE).

And according to your structure, the path to the image would probably be images/logo.jpg (removing the first /)

Upvotes: 29

user229044
user229044

Reputation: 239402

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
}

Upvotes: 5

Related Questions