How to get the natural dimensions of an image using JavaScript or jQuery?

Question

So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientWidth; varheight=img.clientHeight; However, this gets me the html attribute-css style. I want to get the dimensions of the actual image resource of the file. I need this because after uploading the image, its width is set to 0px and I don't know why or where this happens. To prevent this,

P粉239164234 · Answer

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

P粉148434742 · Answer

You can use naturalWidth and naturalHeight, these properties contain the actual, unmodified width and height of the image, but you must wait until the image loads to get them

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

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

This feature only supports IE9 and above, if you must support older browsers, you can create a new image, set its source to the same image, if the size of the image is not modified, it will return the natural size of the image , as this will be the default size 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