Determine original size of image cross browser?

image, javascript

Solution

You have 2 options:

Option 1:

Remove the `width` and `height` attributes and read `offsetWidth` and `offsetHeight`

Option 2:

Create a JavaScript `Image` object, set the `src`, and read the `width` and `height` (you don't even have to add it to the page to do this).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka: As agreed in the comments, I changed the function to run on the ´onload´ event of the image. Otherwise, with big images, `height` and `width` would not return anything because the image was not loaded yet.

Problem

Is there a reliable, framework independent way of determining the physical dimensions of a `<img src='xyz.jpg'>` resized on the client side?

Original source