angular4图片上传中的图片压缩

Question

save(event: any, type, image_type) {
  this.uploadImageFlag = true;
   const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file: File = fileList[0]
        this.files.set('files', file, file.name)
        const reader = new FileReader();
        reader.onload = (event: any) => {
        this.url2 = event.target.result;
        this.upload = true;
        }
        reader.readAsDataURL(event.target.files[0]);

    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<input id="input"  type="file" accept="image/*" style=" width: 180px;" #files (change)="save($event)" />

我正在使用以下功能上传图像并将其发送到后端。问题是图像大小非常大，需要时间才能到达后端。我看过很多关于如何压缩图像的例子，但我真的不想改变我现有的代码和修改模块，所以有人可以告诉我如何改变这个函数并压缩图像。

Answer 1

我根据您的需要制作了这个库：https ://www.npmjs.com/package/ngx-image-compress

自述页面上有完整的示例。如果您想了解如何使用它，这里有一个片段：

@Component({...})
export class AppComponent {

  constructor(private imageCompress: NgxImageCompressService) {}

  compressFile() {

    this.imageCompress.uploadFile().then(({image, orientation}) => {

      console.warn('Size before:', this.imageCompress.byteCount(result));

      this.imageCompress.compressFile(image, orientation, 50, 50).then(

        result => console.warn('Size after:', this.imageCompress.byteCount(result));

      );
    });

  }
}

Answer 2

有许多 3 方模块用于此目的，不确定是否压缩图像，但您可以使用画布调整图像大小并使用其 dataURI 导出相同的图像

正如这里所述，你可以看看这里，这里还有一个基本教程