30

I have this code so far: 

var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;

However this gets me the html attributes - css styles. I want to get dimensions of the actual image resource, of the file.

I need this because upon uploading an image, it's width gets set to 0px and I have no idea why or where this is happening. To prevent it I want to get the actual dimension and reset them. Is this possible?

Edit: Even when I try to get naturalWidth I get 0 as a result. I've added a picture. The weird thing is that it only happens when I upload new files and upon refresh it's working as it should.

http://oi39.tinypic.com/3582xq9.jpg

isherwood
  • 58,414
  • 16
  • 114
  • 157
user1848605
  • 717
  • 2
  • 8
  • 13

3 Answers3

59

You could use naturalWidth and naturalHeight, these properties contain the actual, non-modified width and height of the image, but you have to wait until the image has loaded to get them

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

This is only supported from IE9 and up, if you have to support older browser you could create a new image, set it's source to the same image, and if you don't modify the size of the image, it will return the images natural size, as that would be the default when no other size is given

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • This solves it, thank you. Is wrapping my code inside jQuery.ready() function not enough since the image is not loaded by then? I have this trouble only when uploading a new file to the server. – user1848605 May 02 '13 at 16:31
  • 5
    Images are not loaded when the jQuery DOM ready function fires, only the DOM is ready. `$(window).on('load')` will fire when everything has loaded, but just attaching the onload event handler directly to the image would be better IMO. – adeneo May 02 '13 at 16:33
  • this is very helpful – bdalina Oct 29 '17 at 10:31
18

There are img.naturalHeight and img.naturalWidth which give you the width and height of the image itself, and not the DOM element.

Ry-
  • 218,210
  • 55
  • 464
  • 476
mash
  • 14,851
  • 3
  • 30
  • 33
  • 3
    Does'nt work in IE8 or below, and not in Opera as far as I know. – adeneo May 02 '13 at 16:23
  • 2
    Interesting. Do note that for IE, this is for IE9 or above. I looked it up and stumbled upon this snippet that adds `.naturalHeight()` and `.naturalWidth()` to jQuery. Just thought I could share this info bit here: http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ – Terry Young May 02 '13 at 16:25
5

You can use the following function I made.

Function

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

html:

<img id="myimage" src="foo.png">

use it like this

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions
nathnolt
  • 435
  • 6
  • 8
  • this looks like a solution for < IE8 as described in the top answer, so +1 although I don't like that this extra processing has to affect sane browser users. however, perhaps you could feature detect if naturalWidth exists, and if not then run this code. – George Apr 13 '18 at 22:05