Can we get the real image size through the canvas?

Question

In image tag, if we don't supply width and height property, we will get nothing when retrieving the width and the height of the image. I am using the canvas element to load an image and scale it proportionally. In order to do this, I have to get the actual image size. Is it possible to do that in html 5?

Answer 1

The HTMLImageElement has two properties for this, naturalWidth and naturalHeight. Use those.

As in:

var img = new Image();

img.addEventListener('load', function() {
  // once the image is loaded:
  var width = img.naturalWidth; // this will be 300
  var height = img.naturalHeight; // this will be 400
  someContext.drawImage(img, 0, 0, width, height);
}, false);

img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten

It is wise to set source only after the event listener is defined, see Phrogz's exploration on that here: Should setting an image src to data URL be available immediately?