Comment obtenir les dimensions de l’image actuelle avec Javascript ?

Dans ce tutoriel nous vous montrons comment obtenir les dimensions de l’image en cours à l’aide de JavaScript.

Contexte

Dans le domaine du développement web, il est fréquent d’avoir besoin de récupérer les dimensions d’une image en HTML. Il faut ajuster la taille de l’image en fonction de la résolution de l’appareil de l’utilisateur ou pour d’autres manipulations. Cet article explore l’obtention des dimensions d’images HTML en utilisant JavaScript, en proposant diverses approches.

Utilisation des méthodes naturalWidth et naturalHeight pour obtenir les dimensions de l’image

Une méthode pour récupérer les dimensions d’une image en HTML implique l’utilisation des propriétés naturalWidth et naturalHeight de l’objet HTMLImageElement.

Ces méthodes fournissent la largeur et la hauteur naturelles de l’image, sans considération des éventuelles redimensionnements dans les éléments HTML. Voici un exemple de leur utilisation :

Exemple

<img id="image" src="image-path.jpg">

Ce code HTML crée une balise <img> avec l’identifiant « image » et la source d’image « image-path.jpg ».

const image = document.getElementById('image');
image.onload = function() {
  const height = this.naturalHeight;
  const width = this.naturalWidth;
  console.log(`L'image fait ${height}px de hauteur et ${width}px de largeur`);
}

En JavaScript, nous obtenons l’élément <img> par son identifiant « image » à l’aide de document.getElementById('image'). Ensuite, nous utilisons un gestionnaire d’événements onload pour attendre que l’image soit chargée.

Une fois que l’image est chargée, nous utilisons les propriétés naturalHeight (hauteur naturelle) et naturalWidth (largeur naturelle) de l’objet HTMLImageElement (l’image) pour obtenir les dimensions réelles de l’image. Ces valeurs ne tiennent pas compte des redimensionnements appliqués via des styles CSS ou des attributs HTML.

Enfin, nous affichons ces dimensions dans la console avec console.log.

Ainsi, le script récupère et affiche les dimensions naturelles de l’image après son chargement, ce qui s’avère utile pour effectuer des opérations basées sur les véritables dimensions de l’image dans le contexte du développement web.

Utilisation des propriétés clientWidth et clientHeight pour récupérer les dimensions de l’image

Une approche plus simple pour obtenir les dimensions d’une image au format HTML implique l’utilisation des propriétés clientWidth et clientHeight de l’élément HTML qui englobe l’image. Ces propriétés fournissent les dimensions de l’élément, prenant en compte les redimensionnements CSS ou JavaScript éventuels.

Exemple

<div id="container">
  <img src="image-path.jpg">
</div>

Dans ce code HTML, nous avons un conteneur <div> avec l’identifiant « container » qui enveloppe une image.

const container = document.getElementById('container'); // Obtient l'élément div avec l'ID "container".
const image = container.getElementsByTagName('img')[0]; // Obtient la première balise img à l'intérieur du conteneur.

const height = container.clientHeight; // Obtient la hauteur du conteneur.
const width = container.clientWidth;   // Obtient la largeur du conteneur.

console.log(`Le conteneur fait ${height}px de hauteur et ${width}px de largeur`);

En JavaScript, nous obtenons l’élément du conteneur en utilisant document.getElementById('container') et l’image à l’intérieur du conteneur en utilisant container.getElementsByTagName('img')[0].

Ensuite, nous utilisons les propriétés clientHeight et clientWidth de l’élément conteneur pour obtenir ses dimensions, en tenant compte de tout redimensionnement appliqué par le CSS ou le JavaScript.

Enfin, nous affichons les dimensions du conteneur dans la console avec console.log.

Cela permet d’obtenir et d’afficher les dimensions du conteneur HTML qui enveloppe l’image, ce qui s’avère utile pour effectuer des ajustements basés sur la taille du conteneur dans le cadre du développement web.

Obtention des dimensions de l’image avec la méthode getBoundingClientRect()

Pour obtenir les dimensions d’une image au format HTML, une autre approche consiste à utiliser la méthode getBoundingClientRect() de l’élément HTML contenant l’image. Cette méthode renvoie un objet DOMRect contenant les coordonnées du rectangle qui englobe l’élément, y compris les coordonnées x, y, la largeur et la hauteur de ce rectangle.

Exemple :

<div id="container">
  <img src="image-path.jpg">
</div>

const container = document.getElementById('container'); // Obtient l'élément div avec l'ID "container".
const image = container.getElementsByTagName('img')[0]; // Obtient la première balise img à l'intérieur du conteneur.

const rect = container.getBoundingClientRect(); // Obtient un objet DOMRect pour le conteneur.

console.log(`Le conteneur fait ${rect.width}px de largeur et ${rect.height}px de hauteur`);

Dans cet exemple, nous utilisons la méthode getBoundingClientRect() pour obtenir un objet DOMRect qui représente les dimensions du conteneur, y compris sa largeur et sa hauteur. Ensuite, nous affichons ces dimensions dans la console. Cette méthode est utile pour obtenir les dimensions réelles d’un élément, y compris tout redimensionnement dû au CSS ou au JavaScript.