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

Answer 1

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