使用ng2-file-upload获取图像的宽度和高度

时间:2018-12-07 09:19:38

标签: angular 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()

here。但我不知道如何/在何处导入“上传”。还找到了添加

的解决方案
ngf-min-height="1"

在输入元素中,但是如果输入图像的大小错误,我找不到可以“捕获”错误的位置。

2 个答案:

答案 0 :(得分:1)

将文件转换为base64,然后创建一个以该base为源的图像。在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()">

答案 1 :(得分:0)

最后,我对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()">