Determinando o tamanho da imagem original entre navegadores

Determinar as dimensões físicas originais de uma imagem que foi redimensionada no lado do cliente pode ser uma tarefa desafio entre navegadores. No entanto, existem métodos confiáveis ​​e independentes de estrutura para conseguir isso:

Opção 1: leitura dinâmica da dimensão da imagem

Remova quaisquer atributos predefinidos de largura e altura do HTML da imagem elemento. O sistema ajustará automaticamente as dimensões para atender às necessidades de exibição. Posteriormente, utilize JavaScript para acessar as propriedades offsetWidth e offsetHeight do elemento, que representam a largura e a altura redimensionadas.

Opção 2: objeto de imagem JavaScript

Crie um objeto de imagem JavaScript e atribua a origem da imagem redimensionada à sua propriedade src. Depois que a imagem for carregada, as propriedades de largura e altura do objeto manterão as dimensões originais. Você pode utilizar o evento onload para executar esta operação de forma assíncrona, garantindo que a imagem esteja totalmente carregada antes de recuperar as dimensões.

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

Observação: se você encontrar problemas com imagens grandes que não retornam dimensões, considere usar o evento onload no objeto JavaScript. Isso garante que a imagem seja totalmente carregada antes de acessar suas propriedades.