Ionic 3 compress image

Question

I've been trying to compress an image client-side with Ionic 3 for 2 days now. I have tried:

ng2-img-max - throws an error when using the blue-imp-canvas-to-blob canvas.toBlob() method (a dependency of ng2-img-max). It was only telling me what line the error was happening on. I think I have read that creating an HTMLCanvasElement in Ionic isn't possible - something to do with webworkers.

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

These all threw various errors, after researching them I determined its because the libraries/modules were not compatible with Ionic 3. I think a lot of the time it was a problem with the HTMLCanvasElement.

I tried the suggestion in this question - but changing the quality variable isn't changing the size of the image.

Has anyone had success compressing images client-side using Ionic 3? How did you do it?

Answer 1

Try following CameraOptions with camera plugin.

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

I am using 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;
      })
}

Play with the options, or loop the compressing process to get the desired result :)