Resize and compress image quality before upload in Firebase with Angular

Question

In my app an user can submit a photo that will be uploaded into Firebase Storage. I need to resize and compress the photo quality (without ruining it) to not take up much space in the storage and to speed up the upload an retrieve process.

How can I do? advices?

This is my selectPhoto.ts code that choose the photo that I will upload!

selectPhoto_phone(){
    this.camera.getPicture({
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, 
      destinationType: this.camera.DestinationType.DATA_URL,
      quality: 100,
      encodingType: this.camera.EncodingType.PNG,
    }).then(imageData => {

      this.isEnabled = true;
      this.myPhoto = imageData;
    }, error => {

      this.isEnabled = false;
      console.log("ERROR -> " + JSON.stringify(error));
    });
  }

you can ask for a lower `quality` by giving a smaller number to the quality param. Mind the quirks though. https://github.com/apache/cordova-plugin-camera#cameraoptions-errata- — toskv, Jan 02 '18 at 17:48
otherwises you could use a browser based solution like this maybe? if you use ionic for example. https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly — toskv, Jan 02 '18 at 17:51

score 0 · Answer 1 · answered Sep 11 '18 at 08:13

Use the https://ionicframework.com/docs/native/camera/

There is a quality option expecting values 0-100 with default 50 that will provide a compressed image.

const options: CameraOptions = {
  quality: 40, //change this value
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64 (DATA_URL):
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});

Hope it helps :)

Resize and compress image quality before upload in Firebase with Angular

1 Answers1