Получение реальных размеров изображения в 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.