26

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?

0

3 Answers 3

28

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

3
  • 1
    @MarioStoilov Then that means it's not finding the image. So this doesn't actually solve the problem, it just sets it up to work correctly. Try using img.src = "images/logo.jpg"; - note the / I left out at the beginning of the string
    – Ian
    Jun 11, 2013 at 16:40
  • 1
    Yeah, I kinda noticed, but deleted my comment before you replied :/. Thx anyway Jun 11, 2013 at 16:41
  • 2
    Hello I have the same problem with code but the error comes only in the firefox browser. Where as it working in the other all browsers. Is there any special case for firefox. I have tried this code but still did not get any result. If possible please help me.
    – user3270303
    Feb 28, 2014 at 14:17
5

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
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.