Определение исходного размера изображения в разных браузерах

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

Вариант 1: динамическое считывание размеров изображения

Удалите все предопределенные атрибуты ширины и высоты из HTML-кода изображения. элемент. Система автоматически отрегулирует размеры в соответствии с потребностями дисплея. Затем используйте JavaScript для доступа к свойствам offsetWidth и offsetHeight элемента, которые представляют измененную ширину и высоту.

Вариант 2: объект изображения JavaScript

Создайте объект изображения JavaScript и назначьте источник изображения с измененным размером его свойству src. После загрузки изображения свойства ширины и высоты объекта сохранят исходные размеры. Вы можете использовать событие onload для асинхронного выполнения этой операции, гарантируя полную загрузку изображения перед получением размеров.

Пример кода:

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

Примечание: Если у вас возникли проблемы с большими изображениями, которые не возвращают размеры, рассмотрите возможность использования события onload внутри объекта JavaScript. Это гарантирует, что изображение полностью загрузится перед доступом к его свойствам.