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