Получение размеров загруженной картинки

Реализую загрузку картинки и мне нужно знать размеры полученной картинки (под размерами подразумевается высота и ширина картинки).
Для реализации использую getBoundingClientRect(), но при загрузке картинки, изначально показывает дефолтные размеры блока (установленные стилями - 250px). После загрузки следующего файла, показывает уже как раз таки корректные размеры того, файла который загружал первым.

Код:

const previewImage = document.querySelector('#preview');

inputImage.onchange = function(){
  if (this.files && this.files[0]){
    const reader = new FileReader();
    reader.onload = function(e) {
      previewImage.setAttribute('src', e.target.result);
      };
    reader.readAsDataURL(this.files[0]);
    this.style.display = 'none';
    console.log(previewImage.getBoundingClientRect())
    }
  }

введите сюда описание изображения

После получения размера загружаю другую картинку, и получаю уже корректные размеры нужной мне картинки.

введите сюда описание изображения Возможно есть какие то особенности у данного метода?


Ответы (0 шт):