Angular 6 中的图像尺寸验证

Question

如何验证上传图像的尺寸。上传图像的尺寸应为 100 x 100。

上传.ts

 onFileChange(event) {
     let reader = new FileReader();
     if (event.target.files && event.target.files.length > 0) {
       let file = event.target.files[0];
       reader.readAsDataURL(file);
       reader.onload = () => {
          this.imagePreview = reader.result;
          this.employee.photo = reader.result.split(",")[1];
     };
    }
 }  

上传.html

    <div class="row">
         <div class="col-md-5">
            <input type="file" id="avatar" 
            (change)="onFileChange($event)" #fileInput name="photo">
             <p style="color: red">photo should be 100 x 100 size</p>
          </div>
     </div>

Answer 1

这个答案工作正常 ，但有时它返回 0 高度和宽度，这是因为图像未加载。我通过简单地使用 setTimeout 解决了这个问题-

let reader = new FileReader();
if (event.target.files && event.target.files.length > 0) {
  let file = event.target.files[0];

  let img = new Image();

  img.src = window.URL.createObjectURL( file );
  reader.readAsDataURL(file);
  reader.onload = () => {
    setTimeout(() => {
      const width = img.naturalWidth;
      const height = img.naturalHeight;

      window.URL.revokeObjectURL( img.src );
      console.log(width + '*' + height);
      if ( width !== 64 && height !== 64 ) {
        alert('photo should be 64 x 64 size');
        form.reset();
      } else {
        this.imgURL = reader.result;
      }
    }, 2000);
      };