Revelar las dimensiones originales de las imágenes redimensionadas del lado del cliente en todos los navegadores

Determinar las verdaderas dimensiones de una imagen cuyo tamaño ha sido redimensionado en el cliente El lado es una tarea crucial para muchos escenarios de desarrollo web. Ya sea que esté ajustando imágenes para diseños responsivos o mostrando el tamaño original a los usuarios, es esencial encontrar una solución confiable que funcione de manera consistente en todos los navegadores.

Opción 1: Liberar OffsetWidth y OffsetHeight

Un enfoque implica eliminar los atributos de ancho y alto del elemento y recuperar su offsetWidth y offsetHeight. Esta técnica elimina la posibilidad de que los estilos CSS anulen las dimensiones originales.

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

Opción 2: aprovechar objetos de imagen de JavaScript

Un método alternativo utiliza objetos de imagen de JavaScript. Cree un objeto Imagen, asigne la fuente de la imagen a su propiedad src y acceda directamente a sus propiedades de ancho y alto después de que se haya cargado la imagen.

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

Recuerde reconocer la importancia del manejo de eventos. Con imágenes grandes, usar el enfoque de la Opción 2 sin el evento onload puede dar como resultado resultados vacíos porque es posible que la imagen aún no se haya cargado cuando se ejecuta la ejecución del código.

Al emplear estas técnicas independientes del navegador, puedes usar con confianza determine las dimensiones reales de las imágenes redimensionadas, potenciando sus aplicaciones web con mayor precisión y flexibilidad.