Determine original size of image cross browser?

Question

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

Answer 1

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.