NS_ERROR_NOT_AVAILABLE: Component is not available

Question

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         


        

Answer 1

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.

Answer 2

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 /)

Answer 3

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
}