Revelando as dimensões originais de imagens redimensionadas do lado do cliente em todos os navegadores

Determinando as verdadeiras dimensões de uma imagem que foi redimensionada no cliente lado é uma tarefa crucial para muitos cenários de desenvolvimento web. Esteja você ajustando imagens para layouts responsivos ou exibindo o tamanho original para os usuários, é essencial encontrar uma solução confiável que funcione de forma consistente em todos os navegadores.

Opção 1: liberando OffsetWidth e OffsetHeight

Uma abordagem envolve remover os atributos de largura e altura do elemento e recuperar seu offsetWidth e offsetHeight. Esta técnica elimina a possibilidade de estilos CSS substituirem as dimensões originais.

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

Opção 2: aproveitando objetos de imagem JavaScript

Um método alternativo utiliza objetos de imagem JavaScript. Crie um objeto Image, atribua a fonte da imagem à sua propriedade src e acesse diretamente suas propriedades de largura e altura após o carregamento da imagem.

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

Lembre-se de reconhecer a importância do tratamento de eventos. Com imagens grandes, usar a abordagem da Opção 2 sem o evento onload pode resultar em resultados vazios porque a imagem pode ainda não ter sido carregada quando a execução do código for executada.

Ao empregar essas técnicas independentes de navegador, você pode ter confiança determine as verdadeiras dimensões das imagens redimensionadas, capacitando seus aplicativos da web com maior precisão e flexibilidade.