Question Comment obtenir la taille de l'image (hauteur et largeur) en utilisant JavaScript?


Existe-t-il des API ou des méthodes jQuery ou JS pures pour obtenir les dimensions d'une image sur la page?


511
2018-03-08 06:41


origine


Réponses:


clientWidth et clientHeight sont des propriétés DOM qui indiquent la taille actuelle dans le navigateur des dimensions intérieures d'un élément DOM (à l'exclusion des marges et des bordures). Donc, dans le cas d'un élément IMG, cela aura les dimensions réelles de l'image visible.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

384
2018-03-08 06:45



Vous pouvez obtenir l'image par programmation et vérifier les dimensions en utilisant Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Cela peut être utile si l'image ne fait pas partie du balisage.


678
2018-03-09 14:44



Aussi (en plus des réponses de Rex et Ian) il y a:

imageElement.naturalHeight

et

imageElement.naturalWidth

Ceux-ci fournissent la hauteur et la largeur du fichier image lui-même (plutôt que seulement l'élément image).


245
2018-03-08 07:22



Si vous utilisez jQuery et que vous demandez des tailles d'image, vous devez attendre qu'elles se chargent ou que vous n'obtiendrez que des zéros.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

105
2018-03-01 21:38



Je pense qu’une mise à jour de ces réponses est utile car l’une des réponses les mieux votées suggère clientWidth et clientHeight, que je pense est maintenant obsolète.

J'ai fait quelques expériences avec HTML5, pour voir quelles valeurs sont effectivement retournées.

Tout d'abord, j'ai utilisé un programme appelé Dash pour obtenir une vue d'ensemble de l'API d'image. Il dit que height et width sont la hauteur / largeur rendue de l'image et que naturalHeight et naturalWidth sont la hauteur / largeur intrinsèque de l'image (et sont HTML5 seulement).

J'ai utilisé une image d'un beau papillon, à partir d'un fichier de hauteur 300 et largeur 400. Et ce Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Ensuite, j'ai utilisé ce code HTML, avec CSS en ligne pour la hauteur et la largeur.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Résultats:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

J'ai ensuite changé le HTML en ce qui suit:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

c'est-à-dire en utilisant des attributs de hauteur et de largeur plutôt que des styles en ligne

Résultats:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

J'ai ensuite changé le HTML en ce qui suit:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

c'est-à-dire en utilisant à la fois les attributs et CSS, pour voir qui a la priorité.

Résultats:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

88
2018-06-13 14:36



En utilisant JQuery, vous faites ceci:

var imgWidth = $("#imgIDWhatever").width();

62
2018-03-08 06:45



La chose que tous les autres ont oublié est que vous ne pouvez pas vérifier la taille de l'image avant qu'elle ne se charge. Lorsque l'auteur vérifie toutes les méthodes publiées, il ne fonctionnera probablement que sur localhost. Puisque jQuery peut être utilisé ici, rappelez-vous que l'événement 'ready' est déclenché avant le chargement des images. $ ('# xxx'). width () et .height () doivent être déclenchés dans un événement onload ou plus tard.


26
2018-03-08 16:53