Get image size using JQuery/ javascript

Question

please tell me how to get image size of all images in the page using jquery or javascript

Solution 1

The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:

var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;

If you're using jQuery, you can simply use $.width and $.height:

var width = $("id").width();
var height = $("id").height();

So, to get the size of all images, loop them through:

$("img").each(function()
{
    console.log(this.width());
    console.log(this.height());
});

If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Solution 2

$('img').each(function() {
   $(this).width(); // current image's width
   $(this).height(); // current image's height
});

Solution 3

please tell me how to get image size of all images in the page using jquery or javascript

You can use width() and height() method of jQuery:

$('img').each(function(){
   alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});

More Info:

• http://api.jquery.com/width/
• http://api.jquery.com/height/

Comments

[SIFE]

I have a form to upload an image, is there any way to get image dimensions on the client side before I process it on server side.

[sam]

@SIFE Yes, it is possible in newer browsers. Please ask this in a new question.

[SIFE]

See my question pls. stackoverflow must star thinking on url shortening service.