Comment puis-je obtenir la largeur et la hauteur d'une image à l'aide de JavaScript ?

Récupération des dimensions d'une image avec JavaScript

Avez-vous besoin d'un moyen de déterminer les dimensions d'une image sur une page Web ? JavaScript fournit une solution simple pour cette tâche.

Obtention de la taille de l'image

Pour obtenir par programmation les dimensions de l'image, utilisez le code JavaScript suivant :

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

Dans cet extrait, un nouvel objet Image est créé. L'écouteur d'événement onload est chargé de traiter l'image une fois son chargement terminé. L'auditeur récupère ensuite les propriétés de largeur et de hauteur de l'objet image, qui représentent les dimensions de l'image.

Pour les images DOM

Pour les images déjà présentes dans le DOM , vous pouvez accéder directement à leur largeur et leur hauteur propriétés :

const img = document.getElementById('my-image');
alert(img.offsetWidth + 'x' + img.offsetHeight);

Considérations

Gardez à l'esprit que cette approche nécessite que l'image soit chargée avant de récupérer ses dimensions. Pour les images chargées dynamiquement ou qui ne sont pas immédiatement visibles, vous devrez peut-être vous assurer qu'elles sont complètement chargées avant d'accéder à leurs propriétés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!