bug: editing/cropping the gallery image on iOS devices is not working

[Sampath-Lokuge]

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\Sampath\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.7.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.2.1
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.1
   @capacitor/ios     : 3.3.0

.ts

private async takePhoto(source: CameraSource): Promise<void> {
    const image = await Camera.getPhoto({
      quality: 90,
      source,
      allowEditing: true,
      resultType: CameraResultType.DataUrl,
    });

    this.profileDataService.setUserProfilePhoto(image.dataUrl);
  }

It doesn't allow editing/cropping the gallery image on iOS devices. i.e. Add Photo use case. It is working fine on Android devices.

I use this plugin: https://capacitorjs.com/docs/apis/camera#imageoptions

[jcesarmobile]

Yeah, allowEditing is not supported for CameraSource.Photos on iOS 14+ because it uses a newer native image picker that doesn't provide edition capabilities.

I've sent a pull request documenting it.

[Sampath-Lokuge]

May I know when will we have this version? Thanks a lot for the quick feedback!

[jcesarmobile]

The pull request just documents that it doesn't work on iOS 14+, it can't be fixed since the new native picker doesn't allow to edit, so there is nothing to wait for.

The docs will probably be updated next Wednesday.

[Sampath-Lokuge]

Oh... What will be the alternative here for us since most of the users want to edit/crop their photos before updating them no? Any clue, please.

[jcesarmobile]

The alternative would be to use a web based library such as react-cropper or any of this ones. I've only tested the react one, not sure if all of them will work and you should probably use webPath instead of dataUrl

[Sampath-Lokuge]

I'll use ngx-image-cropper here, Thanks a lot for the info!

Ref: https://www.npmjs.com/package/ngx-image-cropper

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.