Get actual image size, after resizing it

Question

I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it's true sizes.

Currently, I have to manually create an array that includes the actual height of all images. For solving a design issue+less manual operation of my gallery, I need to get the actual height of an image, after I resized it (CSS).

I tried:

var imageheight = document.getElementById(imageid).height;

And:

var imageheight = $('#' + imageid).height();

But both return the 150px attribute assigned with the CSS. How can I solve this? Thanks

Answer 1

you have the 'natural' kws to help you out:

with js:

var imageheight = document.getElementById(imageid).naturalHeight;

or with jquery

var imageheight = $('#' + imageid).naturalHeight;

Answer 2

One way you could do it is create a separate image object.

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

That way, you'll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.

Answer 3

@Dinesh's answer to just use the naturalHeight and naturalWidth property is great and probably should be the accepted answer.

Just wanted to add two things here that could save people hours since I see many SO posts around this issue and have myself spent quite sometime on it.

1. naturalHeight may return 0 or undefined if called before the image is loaded. Just setting src attribute may not mean that the image is loaded immediately. I have seen that it is best to fetch it in onload.

   $('selector')[0].onload = function() {
     alert(this.naturalHeight);
     alert(this.naturalWidth);
   }
   

2. If not using this, just $('selector').naturalHeight may not work. You may need to access the associated DOM element i.e $('selector')[0].naturalHeight or $('selector').get(0).naturalHeight since we are using native Javascript's attribute naturalHeight. See this SO post for more details.