Image isn't loaded javascript

Question

here is my javascript code :

> var logoImg = new Image();
> logoImg.src = '../img/smiley.png';
> 
> // Store the original width value so that we can keep the same width/height ratio later
>   var originalWidth = logoImg.width;
> 
>   // Compute the new width and height values
>   logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
>   logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
> 
> // Create an small utility object
>   var logo = {
                 img : logoImg,
>            x : (canvas.width / 2) - (logoImg.width / 2),
>             y : (canvas.height / 2) - (logoImg.height / 2)
>       }
> 
>   // Present the image
>   c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

this code doesn't work the image isn't displayed .... i tried to trace the code and i found that the logoImg.width=0 and logoImg.height=0 ... any suggestions????? thanks in advance

Ivan Chernykh · Accepted Answer · 2013-08-15 06:30:36Z

2

Need to wait until image is loaded, then you will get its correct dimensions:

var logoImg = new Image();
logoImg.src = '../img/smiley.png';
logoImg.onload = function(){
   var originalWidth = logoImg.width;
   logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
   logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth); 
   var logo = {
           img : logoImg,
           x : (canvas.width / 2) - (logoImg.width / 2),
           y : (canvas.height / 2) - (logoImg.height / 2)
       }
   c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
}

And may be in your case you will need to check image's naturalWidth and naturalHeight instead of just width and height.

edited Aug 15, 2013 at 6:30

answered Aug 15, 2013 at 6:18

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ahmed Ghazy Over a year ago

thanks alot for your help ... but i have tried your idea and replaced my code with your modified one with onload function but this didn't work also i think i had error because all code after that didn't work

Ivan Chernykh Over a year ago

@AhmedGhazy So check it line after line , clean it to find the reason , and use browser` console to see errors

Ivan Chernykh · Accepted Answer · 2013-08-15 15:56:01Z

0

You can put a time Interval. Eg :

setTimeout(function(){whatever you want to do here},3000);

edited Aug 15, 2013 at 15:56

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

answered Aug 15, 2013 at 7:46

Bhavya Anand

224 bronze badges

Collectives™ on Stack Overflow

Image isn't loaded javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related