Раскрытие исходных размеров изображений с измененным размером на стороне клиента в браузерах

Определение истинных размеров изображения, размер которого был изменен на клиенте сторона является важнейшей задачей для многих сценариев веб-разработки. Независимо от того, настраиваете ли вы изображения для адаптивного макета или показываете пользователям исходный размер, важно найти надежное решение, которое будет одинаково работать во всех браузерах.

Вариант 1: использование OffsetWidth и OffsetHeight

Один из подходов предполагает удаление атрибутов ширины и высоты из элемента и получение его offsetWidth и offsetHeight. Этот метод исключает возможность переопределения стилей CSS исходных размеров.

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

Вариант 2. Использование объектов изображений JavaScript

Альтернативный метод использует объекты изображений JavaScript. Создайте объект Image, назначьте источник изображения его свойству src и получите прямой доступ к его свойствам ширины и высоты после загрузки изображения.

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

Не забудьте признать важность обработки событий. При работе с большими изображениями использование подхода из варианта 2 без события onload может привести к пустым результатам, поскольку изображение, возможно, еще не загрузилось на момент выполнения кода.

Используя эти методы, не зависящие от браузера, вы можете с уверенностью определять истинные размеры изображений с измененным размером, повышая точность и гибкость ваших веб-приложений.