How to retrieve an image's size using dom in html/javascript?

Question

I'm trying to get the size of an image in javascript, using this kind of code:

var image = document.createElement("img");
image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

Then I've been trying to use image.width or image.naturalWidth to get the image's width but it retrieves 0.

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

After you have created the element using the above code. You can use

image.height

image.width

The reason, you get 0 is because when you execute the statement, it wouldnt have loaded. You have to wait till the image is loaded and execute the statement. You can use document.ready but the problem is that it might not be 100% accurate there.

refer: Official way to ask jQuery wait for all images to load before executing something

You can use window.load (using jquery), but that is something which is risky as per the above article.

For the best possible solution, what you can use a lib https://github.com/desandro/imagesloaded.

You can use @Raman's technique, but the problem is that you have to attach eventlistener to per image which could get clumpsy.

If you are using imagesloaded, you can watch a container for the images to be loaded and execute the code accordingly.

Jsfiddle: https://jsfiddle.net/52q0juq6/1/

edited May 23 '17 at 12:09

Community

1
1

answered Jan 18 '16 at 03:30

Jeremy Rajan

662
3
12

why to use an extra library to do a simple work like this. – Raman Jan 18 '16 at 03:53
It is fine for just 1 image, you can add a listener. But, if you are working on a project.. I would think it as production ready code, dealing with multiple images/assets, then its not simple right! But, if it was just a test, then eventlistener is good :). – Jeremy Rajan Jan 18 '16 at 03:57
Its production ready code, if the requirement is of getting the dimension of a single image then you don't need a full fledged JS library for it, and this was what was asked in the question. And btw your library also attaches load event listeners on the elements in the background, so its not like you are saving `DOM` event listeners or something – Raman Jan 18 '16 at 04:00
Thanks for the answer, @JeremyRajan . My program is quite simple, but your answer may be useful in the future. – Edivar Felipe Jan 18 '16 at 21:52

score 0 · Answer 2 · answered Jan 18 '16 at 03:35

0

You'll need to have image dimensions calculated on load of the image. Here is a fiddle to demonstrate the same.

image.addEventListener('load', function(){
  console.log(image.width);
  console.log(image.height);
});

answered Jan 18 '16 at 03:35

Raman

1,221
13
20

Can you please explain why the answer has been marked down if it has actually answered your query of determining the image dimensions? – Raman Jan 18 '16 at 03:56
Strange, I didn't marked anything down. Anyway, although in the console log shows the size of the image, when I try to use the variable `image.width` in my code it is still zero... I'm trying to figure out why. – Edivar Felipe Jan 18 '16 at 21:48
Please try to use this variable(`image.width`) inside the load callback function only. – Raman Jan 19 '16 at 10:25

score 0 · Answer 3 · answered Jan 18 '16 at 03:52

Its because the image hasn't loaded yet.

<html>
<img  id="theImage" src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" />

<button id="Ok" value="Ok" onclick="ShowImageWidth()" />

<script type="text/JavaScript">
 //This runs when the page loads and shows 0
var element = document.getElementById('theImage');
     alert(element.width); 

//This runs AFTER the page has loaded and the button is clicked and shows 100
function ShowImageWidth() {
    var element = document.getElementById('theImage');
     alert(element.width); 
     }
</script>
</html>

How to retrieve an image's size using dom in html/javascript?

3 Answers3