проверка размера изображения в угловых 6

Question

Как проверить размеры изображения на upload.uploading изображения должны иметь размер 100 x 100.

Upload.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

Вы можете использовать функцию reader.onload(), как показано ниже.

reader.onload = () => {
    var img = new Image();
    img.onload = () => {
        console.log(img.width);
        console.log(img.height);
        // Here you can make use prevention code like shown alert
    };
    img.src = reader.result; // The data URL 
};

Answer 2

window.URL = window.URL || window.webkitURL;

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

       const img = new Image();
       img.src = window.URL.createObjectURL( file );

       reader.readAsDataURL(file);
       reader.onload = () => {

         const width = img.naturalWidth,
         const height = img.naturalHeight;

         window.URL.revokeObjectURL( img.src );

         if( width !== 100 && height !== 100 ) {
            this.error = "photo should be 100 x 100 size"
         }
         this.imagePreview = reader.result;
         this.employee.photo = reader.result.split(",")[1];
     };
    }
 }