При работе с изображениями в JavaScript часто необходимо динамически получать ширину и высоту изображения. Эта информация может быть полезна для различных целей, например для настройки макета веб-страницы или выполнения расчетов на основе размеров изображения. В этой статье мы рассмотрим несколько простых способов получения ширины и высоты изображения с помощью JavaScript, а также приведем практические примеры кода.

Метод 1. Использование свойств naturalWidth и naturalHeight
Самый простой способ получить размеры изображения — обратиться к свойствам naturalWidthи naturalHeight. Эти свойства представляют исходные размеры файла изображения. Вот пример:

const img = document.getElementById('myImage');
const width = img.naturalWidth;
const height = img.naturalHeight;
console.log(`Image width: ${width}px`);
console.log(`Image height: ${height}px`);

Метод 2. Загрузка изображения и получение размеров.
Другой подход предполагает создание объекта Imageи динамическую загрузку изображения. Прикрепив прослушиватель событий к событию load, мы можем гарантировать, что изображение полностью загружено, прежде чем получить доступ к его размерам. Вот пример:

const img = new Image();
img.src = 'image.jpg';
img.addEventListener('load', function() {
  const width = this.width;
  const height = this.height;
  console.log(`Image width: ${width}px`);
  console.log(`Image height: ${height}px`);
});

Метод 3: использование функции getComputedStyle()
Если вам нужно получить отображаемые размеры изображения с учетом любых примененных к нему стилей CSS, вы можете использовать функцию getComputedStyle(). Этот метод возвращает объект CSSStyleDeclaration, содержащий вычисленные стили элемента. Вот пример:

const img = document.getElementById('myImage');
const styles = getComputedStyle(img);
const width = parseInt(styles.getPropertyValue('width'), 10);
const height = parseInt(styles.getPropertyValue('height'), 10);
console.log(`Image width: ${width}px`);
console.log(`Image height: ${height}px`);

Метод 4: использование свойств offsetWidth и offsetHeight
В некоторых случаях вам может потребоваться получить размеры изображения внутри его родительского контейнера. В этом могут помочь свойства offsetWidthи offsetHeight. Эти свойства возвращают визуализированную ширину и высоту элемента, включая отступы, границы и полосы прокрутки. Вот пример:

const img = document.getElementById('myImage');
const width = img.offsetWidth;
const height = img.offsetHeight;
console.log(`Image width: ${width}px`);
console.log(`Image height: ${height}px`);

В этой статье мы рассмотрели несколько методов получения ширины и высоты изображения с помощью JavaScript. Используя такие свойства, как naturalWidth, naturalHeight, width, height, offsetWidthи offsetHeightмы можем легко получить доступ к размерам изображения в различных сценариях. Эти методы полезны для создания адаптивных веб-сайтов, выполнения динамических вычислений или настройки макета на основе характеристик изображения. Поэкспериментируйте с этими примерами кода и выберите метод, который лучше всего соответствует вашим конкретным требованиям.