Question

＆＃13;

position: sticky;

＆＃13;

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]);

    }
}

＆＃13;

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

Answer 1

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

如此处所述，您可以查看here这里也是基本的tutorial

Answer 2

我根据您的需要制作了这个库：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 3

按照下面的教程实现压缩的目的

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

在angular4中的图像上传中的图像压缩

3 个答案: