Question

我已经尝试用Ionic 3压缩客户端图像2天了。我试过了：

ng2-img-max - 使用blue-imp-canvas-to-blob canvas.toBlob()方法（ng2-img-max的依赖项）时会引发错误。它只告诉我错误发生在哪一行。我想我已经读到在Ionic中创建HTMLCanvasElement是不可能的 - 与webworkers有关。

Ahdin - JS library JIC - JS library TinyJPG - npm module

这些都抛出了各种错误，经过研究后我确定了它，因为库/模块与Ionic 3不兼容。我认为很多时候它是HTMLCanvasElement的问题。

我在this问题中尝试了这个建议 - 但更改quality变量并不是要改变图像的大小。

有没有人使用Ionic 3成功压缩客户端图像？你是怎么做到的？

Answer 1

尝试使用camera plugin跟踪CameraOptions。

const options: CameraOptions = {
        quality: 20,
        targetWidth: 600,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.PNG,
        mediaType: this.camera.MediaType.PICTURE,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true //may not work with some deices
}

Answer 2

我正在使用ngx-image-compress

import { NgxImageCompressService } from "ngx-image-compress";

constructor(public imageCompress: NgxImageCompressService) { }

private compressImage() {
      this.imageCompress.compressFile(data, '', 50, 50).then(result => {
         this.imageData = result;
      })
}

播放选项，或循环进行压缩，以获得所需的结果：）

离子3压缩图像

2 个答案: