please tell me how to get image size of all images in the page using jquery or javascript
2
-
You want the total size summed up? each image separate?The Scrum Meister– The Scrum Meister2010-12-29 07:43:51 +00:00Commented Dec 29, 2010 at 7:43
-
possible duplicate of How to get image size (height & width) using JavaScript?Anthony Hatzopoulos– Anthony Hatzopoulos2014-10-15 14:28:23 +00:00Commented Oct 15, 2014 at 14:28
Add a comment
|
3 Answers
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)
3 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.
alexn
@SIFE Yes, it is possible in newer browsers. Please ask this in a new question.
$('img').each(function() {
$(this).width(); // current image's width
$(this).height(); // current image's height
});
