Почему загрузка naturalWidth изображения возвращает ширину ранее загруженного изображения?

Question

Я успешно показал предварительный просмотр загруженного изображения. Теперь мне нужно знать его naturalWidth.

Однако, когда я получаю доступ к naturalWidth моего изображения, он возвращает ширину ранее загруженного изображения.

Например: первое загруженное изображение имеет ширина 100, второе изображение имеет ширину 200. Когда я загружаю первое изображение, предупреждаемое значение равно 0. Когда я загружаю второе изображение, значение равно 100.

Вот часть моего кода.

var reader = new FileReader();
reader.onload = function(e) {
    $('#img').css("display", "block").attr('src', e.target.result);
    var width = document.querySelector('#img').naturalWidth;
    alert(width);
};
reader.readAsDataURL(event.target.files[0]);

Answer 1

Вы должны подождать, пока ваш загрузится, прежде чем делать что-либо с ним, например, получать доступ к его naturalWidth.

Обратите внимание, что здесь вам абсолютно не нужен FileReader, создайте URL-адрес blob: // из вашего файла:

// onchange = evt => {
  $('#img')
    .css("display", "block")
    .attr('src', URL.createObjectURL(e.target.files[0])
    .one('load', function(e) => {
      const width = this.naturalWidth;
      alert(width);
    });