Получение реальных размеров изображения в JS: Safari/Chrome

Быстрый ответ

const img = new Image();
img.onload = () => console.log('Реальные размеры:', img.naturalWidth, 'x', img.naturalHeight);
img.src = 'breathtaking-view.jpg';

Чтобы узнать исходные размеры изображения в браузерах Chrome и Safari, используйте объект Image и обработчик события onload, возвращающий значения свойств naturalWidth и naturalHeight.

Углубляемся в детали

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

Разбор свойств naturalWidth и naturalHeight

Свойства naturalWidth и naturalHeight позволяют обнаружить истинные размеры изображения, которые сохраняются вне зависимости от внешних манипуляций. Благодаря этим свойствам мы видим изображение таким, каким оно было создано.

Подробнее об этом расскажет наш спикер на видео

Тонкости работы с загруженными изображениями

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

Визуализация

Пример для наглядности:

Характеристики картинки в рамке:
| Атрибут         | Ширина | Высота |
| --------------  | -----  | ------ |
| Видимые размеры | 300px | 200px  |
| Реальные размеры    | 600px | 400px  |

И соответствующий код JavaScript:

const img = new Image();

img.onload = function() {
  const naturalWidth = this.naturalWidth;
  const naturalHeight = this.naturalHeight;

  console.log(`Реальные размеры: ${naturalWidth} x ${naturalHeight}`);
};

img.src = 'skeleton-in-your-closet.jpg';

В данном примере становится ясно, что настоящая ширина и высота изображения всегда доступна в свойствах naturalWidth и naturalHeight.

Приспособляемость к различным браузерам

Не забывайте о проверке поддержки свойств naturalWidth и naturalHeight в различных браузерах, например, на сайте caniuse.com.

Обработка ошибок: Неотъемлемая часть процесса

Если в процессе загрузки изображения произошла ошибка, используйте обработчик .onerror для отрисовки альтернативного изображения или вывода сообщения об ошибке.

jQuery: Сюрприз для разработчика

Если в вашем проекте используется jQuery, то удобно будет обернуть обработку размеров в пользовательскую функцию jQuery для отслеживания кода.

Воспользоваться преимуществами HTML5

С приходом HTML5 работа с графикой стала более удобной, это касается и графики SVG. Свойства naturalWidth и naturalHeight идеально подходят для определения размеров графики SVG внутри тегов image.

Полезные материалы

1. HTMLImageElement – веб-API | MDN — подробная информация о HTMLImageElement.
2. Как получить реальные ширину и высоту изображения с помощью JavaScript (в Safari/Chrome) – Stack Overflow — полезные советы и ответы от сообщества stackoverflow.
3. HTML DOM Image Object – W3Schools — детально изучите объекты изображений в DOM.
4. Чтение файлов в JavaScript | Статьи | web.dev — статья о работе с файлами в JavaScript.
5. Отзывчивые изображения: Если вы изменяете только разрешение, используйте srcset. | CSS-Tricks — советы по созданию адаптивных изображений.
6. События загрузки в DOM: DOMContentLoaded, load, beforeunload, unload – JavaScript.info — всё о событиях загрузки в JavaScript.