Determinación del tamaño de la imagen original en todos los navegadores

Determinar las dimensiones físicas originales de una imagen cuyo tamaño ha sido redimensionado en el lado del cliente puede ser una desafío entre navegadores. Sin embargo, existen métodos confiables e independientes del marco para lograr esto:

Opción 1: Lectura dinámica de dimensiones de imagen

Eliminar cualquier atributo predefinido de ancho y alto de la imagen HTML elemento. El sistema ajustará automáticamente las dimensiones para adaptarse a las necesidades de visualización. Posteriormente, utilice JavaScript para acceder a las propiedades offsetWidth y offsetHeight del elemento, que representan el ancho y alto redimensionados.

Opción 2: Objeto de imagen de JavaScript

Crear un objeto de imagen de JavaScript y asigne la fuente de la imagen redimensionada a su propiedad src. Una vez que la imagen se haya cargado, las propiedades de ancho y alto del objeto mantendrán las dimensiones originales. Puede utilizar el evento onload para ejecutar esta operación de forma asíncrona, asegurándose de que la imagen esté completamente cargada antes de recuperar las dimensiones.

Ejemplo de código:

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`
}

Nota: Si encuentra problemas con imágenes grandes que no devuelven dimensiones, considere usar el evento onload dentro del objeto JavaScript. Esto asegura que la imagen se haya cargado completamente antes de acceder a sus propiedades.