Dévoilement des dimensions originales des images redimensionnées côté client dans les navigateurs

Détermination des vraies dimensions d'une image qui a été redimensionnée sur le client côté est une tâche cruciale pour de nombreux scénarios de développement Web. Qu'il s'agisse d'ajuster des images pour des mises en page réactives ou d'afficher la taille d'origine aux utilisateurs, il est essentiel de trouver une solution fiable qui fonctionne de manière cohérente sur tous les navigateurs.

Option 1 : libérer OffsetWidth et OffsetHeight

Une approche consiste à supprimer les attributs width et height de l'élément et à récupérer ses offsetWidth et offsetHeight. Cette technique élimine la possibilité que les styles CSS remplacent les dimensions d'origine.

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

Option 2 : Exploiter les objets image JavaScript

Une méthode alternative utilise les objets image JavaScript. Créez un objet Image, attribuez la source de l'image à sa propriété src et accédez directement à ses propriétés de largeur et de hauteur une fois l'image chargée.

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

N'oubliez pas de reconnaître l'importance de la gestion des événements. Avec des images volumineuses, l'utilisation de l'approche de l'option 2 sans l'événement onload peut entraîner des résultats vides, car l'image n'est peut-être pas encore chargée lors de l'exécution du code.

En employant ces techniques indépendantes du navigateur, vous pouvez en toute confiance déterminez les véritables dimensions des images redimensionnées, offrant ainsi à vos applications Web une précision et une flexibilité accrues.