Comment déterminer la taille de l'image originale sur plusieurs navigateurs ?

Détermination de la taille de l'image d'origine sur plusieurs navigateurs

Dans le développement Web, le redimensionnement des images côté client est une pratique courante pour optimiser les performances et la réactivité des pages . Cependant, déterminer les dimensions physiques d'origine d'une image redimensionnée peut s'avérer difficile en raison des incohérences du navigateur. Cet article explore deux options fiables et indépendantes du framework pour obtenir ces informations.

Option 1 : Utilisation de OffsetWidth et OffsetHeight

Cette méthode implique de supprimer les attributs explicites de largeur et de hauteur. à partir du élément. Par la suite, vous pouvez accéder aux propriétés offsetWidth et offsetHeight pour récupérer la largeur et la hauteur réelles de l'image redimensionnée. Cette option est simple et prise en charge par la plupart des principaux navigateurs.

Option 2 : Utiliser un objet image JavaScript

La deuxième approche consiste à créer un objet image JavaScript, en définissant son attribut src. à la source de l'image et accéder à ses propriétés de largeur et de hauteur. Notez qu'il n'est pas nécessaire d'ajouter l'image à la page pour que cela fonctionne.

Voici un exemple d'extrait de code :

<code class="javascript">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Modifié par Pekka :

Pour garantir des résultats précis avec de grandes images, l'événement onload de l'image peut être utilisé pour déclencher la fonction. Sinon, la hauteur et la largeur risquent de ne pas être disponibles avant la fin du chargement de l'image.

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!