Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page?
-
12It's easy with modern browsers: davidwalsh.name/get-image-dimensions – Yarin Jan 9 '15 at 5:08
You can programmatically get the image and check the dimensions using Javascript...
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
This can be useful if the image is not a part of the markup.
-
3@blo0p3r - the image doesnt need to be loaded into the DOM before this. It loads the image, and fires the onload to give us the dimensions. By the way - Best answer here!! – Vik Jul 23 '12 at 17:12
-
-
How can I use this code for multiple (an array of) images? Probably would need to combine it with the best answer from here: stackoverflow.com/questions/4288759/… ? – Kozuch Oct 9 '13 at 10:19
-
Solution for multiple images here: stackoverflow.com/questions/19269834/… – Kozuch Oct 9 '13 at 11:51
-
2
clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
-
32@Nicky exactly right. It gives the dimensions of the image as it is rendered in that instance. – Rex M Sep 1 '11 at 9:33
-
8
-
198
-
5
document.getElementByIdis longer to type but 10 times faster than$('#...')[0]. – bfontaine Aug 12 '14 at 9:57 -
17@RexM On Chrome 35, it’s 16 times faster: jsperf.com/document-getelementbyid-vs-jquery/5 – bfontaine Aug 12 '14 at 13:52
Also (in addition to Rex and Ian's answers) there is:
imageElement.naturalHeight
and
imageElement.naturalWidth
These provide the height and width of the image file itself (rather than just the image element).
-
15
-
-
1I'm using chrome and this only works if the image size in the dom doesn't change once the page is loaded. – Jonathan Czitkovics Sep 8 '17 at 11:06
-
Yes... this is what i do. And then,afterward, if "naturalwidth" or height come back as NaNs, I revert to the other method from the previous answer (get the image again as a new Image(), and then get its width and height during the onload event. Slower, but this way it will work in older browsers like IE8. – Randy Feb 1 '19 at 17:46
-
in case you want to know about browser support caniuse.com/#feat=img-naturalwidth-naturalheight – ulmer-morozov Feb 28 '19 at 19:24
If you are using jQuery and you are requesting image sizes you have to wait until they load or you will only get zeroes.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
-
-
@AndersLindén - see thel ink that Akseli added for the load event. There is a specific section devoted to images. The technical answer is "no," but in practice I've never had a problem with our sites that use this method. – mrtsherman Sep 15 '14 at 19:36
-
-
I think an update to these answers is useful because one of the best-voted replies suggests using clientWidth and clientHeight, which I think is now obsolete.
I have done some experiments with HTML5, to see which values actually get returned.
First of all, I used a program called Dash to get an overview of the image API.
It states that height and width are the rendered height/width of the image and that naturalHeight and naturalWidth are the intrinsic height/width of the image (and are HTML5 only).
I used an image of a beautiful butterfly, from a file with height 300 and width 400. And this Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Then I used this HTML, with inline CSS for the height and width.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Results:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
I then changed the HTML to the following:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
i.e. using height and width attributes rather than inline styles
Results:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
I then changed the HTML to the following:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
i.e. using both attributes and CSS, to see which takes precedence.
Results:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
-
1
Using JQuery you do this:
var imgWidth = $("#imgIDWhatever").width();
-
63
-
11
-
3@JamesWestgate If the image has not yet been loaded, there is not way of determining its actual size. You could however attempt to read the
widthandheightattributes of theimgelement. – Tim Jun 4 '12 at 17:28 -
@Tim You can load it in the background and when its loaded you can have its dimensions – Odys Jan 22 '14 at 15:08
The thing all other have forgot is that you cant check image size before it loads. When the author checks all of posted methods it will work probably only on localhost. Since jQuery could be used here, remember that 'ready' event is fired before images are loaded. $('#xxx').width() and .height() should be fired in onload event or later.
-
9Post some updated code, you may get upvoted and even get a coveted reversal badge! – James Westgate Jun 2 '11 at 9:31
-
1
-
5
You can only really do this using a callback of the load event as the size of the image is not known until it has actually finished loading. Something like the code below...
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
-
1
With jQuery library-
Use .width() and .height().
More in jQuery width and jQuery heigth.
Example Code-
$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>
ok guys, i think i improved the source code to be able to let the image load before trying to find out its properties, otherwise it will display '0 * 0', because the next statement would have been called before the file was loaded into the browser. Requires jquery...
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}
Assuming, we want to get image dimensions of <img id="an-img" src"...">
// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("an-img");
console.log({
"naturalWidth": el.naturalWidth, // Only on HTMLImageElement
"naturalHeight": el.naturalHeight, // Only on HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});
Natural Dimensions
el.naturalWidth and el.naturalHeight will get us the natural dimensions, the dimensions of the image file.
Layout Dimensions
el.offsetWidth and el.offsetHeight will get us the dimensions at which the element is rendered on the document.
-
4Just upvote the existing answers that provide helpful content; don't copy from several of them into a new one; you're just duplicating content then. – TylerH Jun 27 '19 at 15:13
Before using real image size you should load source image. If you use JQuery framework you can get real image size in simple way.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
This answer was exactly what I was looking for (in jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
You can have a simple function like the following (imageDimensions()) if you don't fear using promises.
// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
const img = new Image()
// the following handler will fire after the successful parsing of the image
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
// and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
img.onerror = () => {
reject('There was some problem with the image.')
}
img.src = URL.createObjectURL(file)
})
// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
const [file] = files
try {
const dimensions = await imageDimensions(file)
console.info(dimensions)
} catch(error) {
console.error(error)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
Select an image:
<input
type="file"
onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>
JQuery Answer:
$height = $('#image_id').height();
$width = $('#image_id').width();
Thought this might be helpful to some who are using Javascript and/or Typescript in 2019.
I found the following, as some have suggested, to be incorrect:
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
This is correct:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";
Conclusion:
Use img, not this, in onload function.
-
img.src above has a typo, should be " not : I tried to edit this but can't because: "Edits must be at least 6 characters; is there something else to improve in this post?" Otherwise a very simple solution that works perfectly! – user2677034 Apr 3 at 4:51
-
Thanks @user2677034 for noticing. I didn't see that. I'll blame Apple's keyboard. Just kidding... It was probably my fault. ;P – Brian Apr 11 at 16:07
Recently I had same issue for an error in the flex slider. The first image's height was set smaller due to the loading delay. I tried the following method for resolving that issue and it's worked.
// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
This will give you the height with respect to the width you set rather than original width or Zero.
You can also use:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Nicky De Maeyer asked after a background picture; I simply get it from the css and replace the "url()":
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
-
I never understood the use of regexp for this when using jQuery. Since jQuery will normalize the attribute for you you get away just fine by using
s.substr(4,s.length-5), it's at least easier on the eyes ;) – Jonas Schubert Erlandsson Jan 29 '13 at 17:32
You can apply the onload handler property when the page loads in js or jquery like this:-
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Simply, you can test like this.
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser 360 browser ...
it is important to remove the browser interpreted setting from the parent div. So if you want the real image width and height you can just use
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
This is one TYPO3 Project example from me where I need the real properties of the image to scale it with the right relation.
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.
This is my method, hope this helpful. :)
function outmeInside() {
var output = document.getElementById('preview_product_image');
if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
} else {
output.src = URL.createObjectURL(event.target.files[0]);
}
return;
}
img.src = URL.createObjectURL(event.target.files[0]);
}
this work for multiple image preview and upload . if you have to select for each of the images one by one . Then copy and past into all the preview image function and validate!!!
Before acquire element's attributes,the document page should be onload:
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}
just pass the img file object which is obtained by the input element when we select the correct file it will give the netural height and width of image
function getNeturalHeightWidth(file) {
let h, w;
let reader = new FileReader();
reader.onload = () => {
let tmpImgNode = document.createElement("img");
tmpImgNode.onload = function() {
h = this.naturalHeight;
w = this.naturalWidth;
};
tmpImgNode.src = reader.result;
};
reader.readAsDataURL(file);
}
return h, w;
}