angular4中图像上传中的图像压缩答案

【问题标题】：Image compression in image upload in angular4angular4中图像上传中的图像压缩
【发布时间】：2018-09-01 16:48:25
【问题描述】：

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)" />

我正在使用以下功能上传图像并将其发送到后端。问题是图像尺寸很大，到达后端需要时间。我已经看过很多关于如何压缩图像的示例，但我真的不想更改现有代码并修改模块，所以有人可以告诉我如何更改此功能并压缩图像。

【问题讨论】：

如果它符合您的需要，请考虑接受答案，它可以帮助社区，谢谢

标签： angular image-compression image-upload

【解决方案1】：

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

正如这里所说，你可以看看here 这里也是一个基本的tutorial

【讨论】：

我有一个非常复杂的代码，我不想修改整个组件。如果第 3 方模块可以帮助我，请分享。我也很困惑调整大小是否与压缩相同？
您可以查看npmjs.com/package/ng2-img-max 照片压缩和照片调整大小是完全不同的两件事。压缩照片 (jpg) 时，您会保持相同的图像大小，即像素的宽度和高度不会改变，但是由于质量下降，您会获得更小的文件大小（以千字节为单位）（将其视为模糊小细节）。调整照片大小时，生成的图像大小（以像素为单位）不同，大多较小，但也可能更大。

【解决方案2】：

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

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


@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));

      );
    });

  }
}

【讨论】：

不错的包，但我正在使用另一种上传方法，所以它对我不起作用，因为我无法获得方向。
for @Andrej：你现在知道方向了

【解决方案3】：

按照下面的教程来达到压缩的目的

https://medium.com/@coolchoudharyvijay/compress-image-and-send-it-to-an-api-in-angular-bc48e6ed3835

【讨论】：