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

Détermination des dimensions physiques d'origine d'une image qui a été redimensionnée côté client peut être une tâche ardue. défi multi-navigateur. Cependant, il existe des méthodes fiables et indépendantes du framework pour y parvenir :

Option 1 : Lecture dynamique des dimensions de l'image

Supprimez tous les attributs de largeur et de hauteur prédéfinis du HTML de l'image. élément. Le système ajustera automatiquement les dimensions pour répondre aux besoins d’affichage. Ensuite, utilisez JavaScript pour accéder aux propriétés offsetWidth et offsetHeight de l'élément, qui représentent la largeur et la hauteur redimensionnées.

Option 2 : Objet image JavaScript

Créer un objet image JavaScript. et attribuez la source de l'image redimensionnée à sa propriété src. Une fois l'image chargée, les propriétés de largeur et de hauteur de l'objet conserveront les dimensions d'origine. Vous pouvez utiliser l'événement onload pour exécuter cette opération de manière asynchrone, en vous assurant que l'image est entièrement chargée avant de récupérer les dimensions.

Exemple de code :

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; // Do this after setting `onload`
}

Remarque : Si vous rencontrez des problèmes avec des images volumineuses qui ne renvoient pas de dimensions, envisagez d'utiliser l'événement onload dans l'objet JavaScript. Cela garantit que l'image est entièrement chargée avant d'accéder à ses propriétés.