Получение ширины и высоты изображения с filereader

Я создаю изображение для изменения размера/обрезки, и я хотел бы показать предварительный просмотр в прямом эфире после того, как они отредактировали его в модальном (бутстрап). Это должно работать, я верю, но я просто получаю 0 в console.log. Это требует кормления ширину и высоту исходного изображения в другой сценарий (который я буду делать после того, просто нужно их в console.log/переменную пока)Получение ширины и высоты изображения с filereader

function doProfilePictureChangeEdit(e) { 
    var files = document.getElementById('fileupload').files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 
     document.getElementById('imgresizepreview').src = theFile.target.result; 

     document.getElementById('profilepicturepreview').src = theFile.target.result; 
     } 
    ); 
    reader.readAsDataURL(files); 
    var imagepreview = document.getElementById('imgresizepreview'); 
    console.log(imagepreview.offsetWidth); 
    $('img#imgresizepreview').imgAreaSelect({ 
     handles: true, 
     enable: true, 
     aspectRatio: "1:1", 
     onSelectEnd: preview 
    }); 
    $('#resizeprofilepicturemodal').modal('show'); 
    };

источник

2013-03-19 Martin Alderson

Вы должны ждать изображения загружать. Попробуйте обработать элемент внутри .onload.

Я также упростил процесс установки источника двух элементов на то, как вы должны это делать (с помощью jQuery).

reader.onload = (function(theFile) { 
    var image = new Image(); 
    image.src = theFile.target.result; 

    image.onload = function() { 
     // access image size here 
     console.log(this.width); 

     $('#imgresizepreview, #profilepicturepreview').attr('src', this.src); 
    }; 
});

источник

2013-03-19 04:02:10

Отлично, спасибо очень много. Я был под дезинформированным впечатлением, что файлы будут загружены с помощью вызова readAsDataURL. –

'reader.onload' вызывается, когда файловая система завершает чтение файла из жесткого диска. 'image.onload' называется по существу, когда по существу объект изображения буферизует данные изображения в браузере. Я вижу, как вы могли бы неправильно истолковать функции onload; рад помочь. –

Примечание: Это работает, только если вы используете «reader.readAsDataURL». С «reader.readAsBinaryString» вы должны идти по-другому. –

Для меня решение Остина не работает, поэтому я представляю один работал для меня:

var reader = new FileReader; 

reader.onload = function() { 
    var image = new Image(); 

    image.src = reader.result; 

    image.onload = function() { 
     alert(image.width); 
    }; 

}; 

reader.readAsDataURL(this.files[0]);

И если вы обнаружите, что назначение image.src = reader.result; происходит после того, как image.onload немного проводным , Я тоже так думаю.

источник

2014-07-23 07:55:29 andi

Не подключено, что загрузка изображения асинхронна. Все данные в src должны быть декодированы, если src является ссылкой, она должна быть загружена и декодирована для изображения, если base64 также. Так что это вполне естественно :-) – BrightShadow

@BrightShadow это правильный ответ. –

это путь у меня есть для AngularJS

  fileReader.readAsDataUrl($scope.file, $scope).then(function(result) { 
 
       var image = new Image(); 
 
       image.src = result; 
 
       image.onload = function() { 
 
        console.log(this.width); 
 
       }; 
 
       $scope.imageSrc = result; //all I wanted was to find the width and height 
 

 

 
      });

источник

2017-07-26 16:26:25

Получение ширины и высоты изображения с filereader

ответ

Смежные вопросы