Проверка по размеру загруженного изображения с использованием Angular 5

Question

В настоящее время я работаю над угловым веб-приложением, функция которого - загрузка фотографий.

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

Вот мой код:

public onImageDrop(evt: any) {
  evt.stopPropagation();
  evt.preventDefault();
  this.croppieImage = null;
  this.onCropeMode = true;
  const image: HTMLImageElement = new Image();
  const file: File = evt.dataTransfer.files[0];
  const myReader: FileReader = new FileReader();

  myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

  myReader.readAsDataURL(file);
  **console.log(image.height);
  console.log(image.width);**
  this.photoInDragMode = false;
  this.uplodedPhotoFileName = file.name;
  this.uplodedPhotoFileMimeType = file.type;
  this.showPhotoSaveButton = true;
  this.onCropeMode = true;
}

У меня проблема в том, что

    console.log(image.height);
    console.log(image.width);

Всегда показывает мне

> 0
> 0

Я действительно ценю, если кто-нибудь может помочь.

Заранее спасибо, ребята.

Answer 1

Попробуйте

 reader.onload = (event) => { 
        var img = new Image;
        this.url = event.target.result;
        img.src = event.target.result;
        console.log(img.width);
      }

Пример: https://stackblitz.com/edit/angular-file-upload-preview-yxuayc

Answer 2

HTML

<input type='file'
       formControlName="img_name"
       class="form-control"
       (change)="readUrl($event)">

TS

readUrl(event: any) {
    if (event.target.files && event.target.files[0]) {

  if (event.target.files[0].type === 'image/jpeg' || 
      event.target.files[0].type === 'image/png' || 
      event.target.files[0].type ==='image/jpg') {
    if (event.target.files[0].size < 200 * 200) {// Checking height * width}
      if (event.target.files[0].size < 2000000) {// checking size here - 2MB}

}}

Answer 3

Вы получаете 0, потому что изображение еще не было загружено, когда вы размещаете журналы консоли. Он загружен в

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

так что вы можете сделать что-то вроде

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;


  });

image.onload = function(){
  // image  has been loaded
console.log(image.height);
};