web-dev-qa-db-fra.com

Comment obtenir les dimensions naturelles d'une image en utilisant javascript ou jquery?

J'ai ce code jusqu'à présent:

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

Cependant, cela me donne les attributs html - styles css. Je veux obtenir les dimensions de la ressource d'image réelle, du fichier.

J'en ai besoin car lors du téléchargement d'une image, sa largeur est réglée à 0 px et je n'ai aucune idée pourquoi ni où cela se produit. Pour l'empêcher, je veux obtenir la dimension réelle et les réinitialiser. Est-ce possible?

Edit: Même lorsque j'essaye d'obtenir naturalWidth, j'obtiens 0 en conséquence. J'ai ajouté une photo. Ce qui est étrange, c'est que cela ne se produit que lorsque je télécharge de nouveaux fichiers et lors de l'actualisation, cela fonctionne comme il se doit.

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

javascriptjqueryimagedimensions
26
user1848605

Vous pouvez utiliser naturalWidth et 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 soit chargée pour les obtenir

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

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

Ceci n'est pris en charge qu'à partir d'IE9 et si vous devez prendre en charge un navigateur plus ancien, vous pouvez créer une nouvelle image, définir sa source sur la même image et si vous ne modifiez pas la taille de l'image, cela rendra les images naturelles taille, car ce serait la valeur par défaut lorsqu'aucune autre taille n'est indiqué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;

[~ # ~] violon [~ # ~]

46
adeneo

Il y a img.naturalHeight et img.naturalWidth qui vous donne la largeur et la hauteur de l'image elle-même, et non l'élément DOM.

18
mash

Vous pouvez utiliser la fonction suivante que j'ai créée.

Fonction

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">

l'utiliser comme ça

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
5
nathnolt