Question Comment puis-je 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 - les 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 définie sur 0px et je n'ai aucune idée de la raison ou de l'endroit où cela se produit. Pour éviter cela, je veux obtenir la dimension réelle et la réinitialiser. Est-ce possible?

Edit: Même si j'essaie 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 qu’en cas de rafraîchissement, il fonctionne comme il se doit.

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


19
2018-05-02 16:16


origine


Réponses:


Vous pourriez 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 récupérer

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 taille, comme ce serait le défaut quand 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;

VIOLON


36
2018-05-02 16:20



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
2018-05-02 16:18



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

3
2017-12-01 14:36