Получить ширину и высоту изображения с помощью ng2-file-upload

Я хочу получить и проверить ширину и высоту загруженного изображения, используя ng2-file-upload и Angular 6.

Мой код до сих пор:

constructor() {
    this.uploader = this.initializeUploader("url");
}

public uploader;


private initializeUploader(url: string): FileUploader {
    const uploadOptions: FileUploaderOptions = {
        allowedMimeType: ['image/jpeg', 'image/png' ],

    }
    const uploader = new FileUploader(uploadOptions);

    uploader.onAfterAddingFile = item => {
        console.log(item);
        //Want to get width here
    }

    return uploader;
}

и HTML:

<input type="file" ng2FileSelect [uploader]="uploader" />

Я искал решения, но ничего не работало для меня. Нашла идею использовать

Upload.imageDimensions(file).then()

здесь. Но я не понимаю, как/куда импортировать «Загрузить». Также нашел решение добавить

ngf-min-height="1"

в элементе ввода, но я не могу найти, где я могу «поймать» ошибку, если размер входного изображения неверен.


angular ng2-file-upload
person Steffi    schedule 07.12.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Преобразуйте свой файл в base64 и создайте образ с этой базой в качестве источника. Во время хука load вы можете получить размер изображения. Вот рабочий фрагмент!

function change() {
  const input = document.querySelector('input');
  const file = input.files[0];
  
  getBase64(file).then(base64 => {
    const img = new Image();
    img.onload = () => console.log(img.width, img.height);
    img.src = base64;
  });
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
<input type="file" onchange="change()">

person Community    schedule 07.12.2018
comment
Я получаю для «функции»: Неожиданный токен. Ожидался конструктор, метод, метод доступа или свойство. Поэтому я изменил его на «общедоступный». также я помещаю this перед getBase64(... так что у меня есть this.getBase64(... в строке img.src = base64 я получаю сообщение об ошибке: [ts] Тип '{}' не может быть назначен типу ' строка". Не знаю, как это решить. Если я закомментирую это, код запустится, но не выведет ширину и высоту - person Steffi; 07.12.2018

arrow_upward
0
arrow_downward

Наконец, я получил эту работу с некоторыми изменениями поста trichetriche:

    public change() {
    const input = document.querySelector('input');
    const file = input.files[0];

    this.getBase64(file).then(base64 => {
      const img = new Image();
      img.onload = () => console.log(img.width, img.height);
      img.src = base64.toString();
    });
  }

  public getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }

и HTML:

 <input type="file" (change)="change()">
person Steffi    schedule 07.12.2018