Comment obtenir les dimensions naturelles d'une image en utilisant JavaScript ou jQuery ?

Question

Jusqu'à présent, j'ai ce code :

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

Cependant, cela me donne les attributs HTML - les styles CSS. Je souhaite obtenir les dimensions de la ressource image réelle du fichier.

J'en ai besoin car après avoir téléchargé l'image, sa largeur est définie sur 0px et je ne sais pas pourquoi ni où cela se produit. Pour éviter cela, je souhaite obtenir les dimensions réelles et les réinitialiser. Est-il possible?

EDIT : Même lorsque j'essaie d'obtenir la naturalWidth, le résultat est 0. J'ai ajouté une photo. Ce qui est étrange, c'est que cela ne se produit que lorsque je télécharge un nouveau fichier et qu'après une actualisation, cela fonctionne correctement.

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

Answer 1

Demandez img.naturalHeight 和 img.naturalWidth de vous donner la largeur et la hauteur de l'image elle-même, pas l'élément DOM.

Answer 2

Vous pouvez utiliser naturalWidth和naturalHeight, ces propriétés contiennent la largeur et la hauteur réelles et non modifiées de l'image, mais vous devez attendre que l'image se charge pour les obtenir

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

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

Cette fonctionnalité ne prend en charge que IE9 et supérieur, si vous devez prendre en charge les anciens navigateurs, vous pouvez créer une nouvelle image, définir sa source sur la même image, si la taille de l'image n'est pas modifiée, elle renverra la taille naturelle de l'image , car ce sera la taille par défaut lorsqu'aucune autre taille n'est donnée

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