Resize image before upload with targetHeight - problem filling space with image


#1

In my app an user can change his avatar. To limit the storage space (with firebase storage) and make the image retrieve from the database faster, I decided to resize the image.

The avatar space it’s 100px x 100px so I decided to resize the image before the upload with

targetHeight: 300

. What I expected is that the uploaded image, that it’s bigger than the avatar space, would fill all the avatar space, instead, if the image it’s rectangular, at its upper and lower margins it leaves an edge like this:
Senza titolo 1

I don’t understand why becase the image it’s big enought to fill all the space.

This is my select image code (before the upload)

 selectPhoto(){
      this.camera.getPicture({
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.DATA_URL,
        quality: 90,
        targetHeight: 300,
        encodingType: this.camera.EncodingType.PNG,
      }).then(imageData => {
        this.myAvatar = imageData;
        this.uploadPhoto();
      }, error => {
        console.log("ERROR -> " + JSON.stringify(error));
      });
  
    }

And this is my html code of the avatar space and the image

 <button ion-button (click)="selectPhoto()" color="light" style=" width: 100px; height: 100px; padding: 0px !important; border-radius: 50px;">
        <img *ngFor="let item of items_user_details;" src="{{item.avatar}}"> 
</button>

Why the image don’t fill my 100x100 px space? Tell me if more code is needed!


#2

Hi @JEricaM

To fill image in rectangle try allowEdit:true

selectPhoto(){
      this.camera.getPicture({
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.DATA_URL,
        quality: 90,
        allowEdit:true,
        targetHeight: 300,
        encodingType: this.camera.EncodingType.PNG,
      }).then(imageData => {
        this.myAvatar = imageData;
        this.uploadPhoto();
      }, error => {
        console.log("ERROR -> " + JSON.stringify(error));
      });
  
    }

thanks


#4

Thank you so much! This is perfect :smiley: