Ionic 3 compress image

user_2287557 0
Viewed 8283

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?

ionic-framework typescript compression image javascript
2 Answers

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 :)

user_90818750
Related