Explication détaillée de la façon d'obtenir la largeur et la hauteur d'origine d'une image à l'aide de Javascript

Avant-propos

Il existe de nombreuses méthodes sur Internet pour utiliser Javascript pour obtenir la largeur et la hauteur d'origine des images. Cet article reviendra sur ce problème, ce qui peut être utile à certaines personnes.

Explication détaillée de l'élément

img dans la page Si vous souhaitez récupérer sa taille d'origine, en prenant la largeur comme exemple, la première chose qui peut vous venir à l'esprit est l'attribut innerWidth de. l'élément, ou width() dans la méthode jQuery.

est le suivant :

<img  id="img" src="1.jpg" alt="Explication détaillée de la façon d'obtenir la largeur et la hauteur d'origine d'une image à l'aide de Javascript" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

Il semble que vous puissiez obtenir la taille de l'image.

Mais si vous ajoutez l'attribut width à l'élément img, par exemple, la largeur réelle de l'image est de 600 et la largeur est définie sur 400. À l’heure actuelle, innerWidth est de 400 et non de 600. Évidemment, il n’est pas fiable d’utiliser innerWidth pour obtenir la taille originale de l’image.

En effet, la propriété innerWidth obtient la largeur réelle rendue du modèle de boîte d'éléments, et non la largeur d'origine de l'image.

<img  id="img" src="1.jpg"    style="max-width:90%" alt="Explication détaillée de la façon d'obtenir la largeur et la hauteur d'origine d'une image à l'aide de Javascript" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

La méthode width() de jQuery appelle la propriété innerWidth au niveau inférieur, donc la largeur obtenue par la méthode width() n'est pas la largeur d'origine de l'image.

Alors, comment obtenir la largeur d'origine de l'élément img ?

naturalWidth/naturalHeight

HTML5 fournit un nouvel attribut naturalWidth/naturalHeight qui permet d'obtenir directement la largeur et la hauteur d'origine de l'image. Ces deux propriétés ont été implémentées dans Firefox/Chrome/Safari/Opera et IE9.

est la suivante :

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

La compatibilité de naturalWidth / naturalHeight dans les principaux navigateurs est la suivante :

Donc, si vous ne considérez pas la compatibilité avec IE8, vous pouvez utiliser en toute sécurité les attributs naturalWidth / naturalHeight.

Implémentation de la compatibilité dans IE7/8 :

Les navigateurs d'IE8 et des versions antérieures ne prennent pas en charge les attributs naturalWidth et naturalHeight.

Dans IE7/8, nous pouvons utiliser new Image() pour obtenir la taille originale de l'image, comme suit :

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

Le navigateur IE7 peut fonctionner avec une fonction compatible encapsulation :

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il pourra apporter des avantages aux études ou au travail de chacun. aide. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour des explications plus détaillées sur la façon d'obtenir la largeur et la hauteur d'origine d'une image en utilisant Javascript, veuillez faire attention au site Web PHP chinois pour les articles connexes !