24

I'm writing a jQuery function where I'd like to access both the native size of an image, and the size specified for it on the page. I'd like to set a variable for each.

How is that done?

Nathan Long
  • 122,748
  • 97
  • 336
  • 451

5 Answers5

37

Modern browsers

When I wrote this answer back in 2009 the browser landscape was much different. Nowadays any reasonably modern browser supports Pim Jager's suggestion using img.naturalWidth and img.naturalHeight. Have a look at his answer.

Legacy answer compatible with super old browsers

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);
Community
  • 1
  • 1
Georg Schölly
  • 124,188
  • 49
  • 220
  • 267
  • I was hoping there was just an image property I had missed, but this is a good workaround. Thank you. – Nathan Long Jul 07 '09 at 18:22
  • 1
    Sometimes this option doesnt work. For example if it isnt loaded you will obtain that the height is 0. It worked for me using the onload method. – Yises Mar 28 '12 at 10:58
  • @Yises be careful with the "load" event, it will not fire if the image is loaded from cache. You should be able to use the image.complete property in conjunction with the "load" event though – jrz Oct 02 '12 at 14:56
24

This should work:

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

The naturalWidth and naturalHeight return the size of the image response, not the display size.

According to Josh' comment this is not supported cross browser, this might be correct, I tested this in FF3

Pim Jager
  • 31,965
  • 17
  • 72
  • 98
1

EDIT - new idea... see http://jsbin.com/uzoza

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

ORIGINAL ANSWER

see How to get image size (height & width) using JavaScript?

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;
Community
  • 1
  • 1
Josh
  • 6,256
  • 2
  • 37
  • 56
1

I'm adding a way to accomplish this and be sure that there is support for all browsers. Pretty much all browsers support naturalWidth and naturalHeight except for Internet Explorer 8 and below.

Since IE 8 and below would return the size of the visible image and not the natural size when using trying to retrieve size values, a small workaround is needed to get the full size dimensions which came from an example by Jack Moore.

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

I set this up to support passing either the image ID value or the name of the ID.

Usage:

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

Or 

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

Be sure to make sure the image is loaded before calling this, whether by using onload or triggering upon adding it to the DOM.

Tested with: Windows XP - Firefox 1.5, IE 8 Windows 7 - IE 9, Chrome 56 Android 6.0.1 - Chrome 50 Android 5.1.1 - Opera Mini 7.6, Dolphin 10.3

Full code example:

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>
Exit
  • 973
  • 2
  • 13
  • 28
-2

My solution would be to write a web service that gets/downloads the image, and then gets its resolution and returns it as {width: x,height:y}. Then you call it with $.ajax or equivalent to retrieve this.

Alternatively you could add the image to a hidden div using 

// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");

And then get the div's width/height though I haven't tried it.

Chris S
  • 64,770
  • 52
  • 221
  • 239
  • If I recall correctly, you can't get width/height on hidden elements. (they will return 0) – TM. Jul 07 '09 at 16:35
  • 2
    Writing an entire backend webservice just to get the height and width of an image in javascript?! – Mark Mar 19 '14 at 09:48