Google Photos Does Not Give Crop Option

Ionic Framework ionic-v3
1

I’m building an app that allows users to upload an image that they have on their phone to use as their avatar.

I’m using the Camera module from Ionic Native and I’m developing in Ionic 2 RC3.

The Scenario: When the user is asked to select their avatar, they have the option to choose one from their phone’s library. Once they choose to select a photo from their gallery, they are presented with a few options. One of those options is the Google Photo app.

The Problem: Even though I have the camera options set up to allow for image cropping, the user is never given the option to crop. The selected image is returned and is cropped ( automatically by Google Photo, it seems ) into an oval shape.

My Camera Options:
let cameraOptions = {
destinationType: Camera.DestinationType.FILE_URI,
encodingType: 0,
quality: 100,
allowEdit: true,
targetWidth: 500,
targetHeight: 500,
correctOrientation: true,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
}

Has anyone encountered this? I’m not sure if this is a problem with the Google Photos app or Ionic.

2

Having the same issue here

3

The issue I am having is that it won’t even crop. Do we still not have a fix for this, or is it possible to block Google Photos and any other offending photo apps from the list of choices presented?

4

I found that this a known issue in Cordova ( at least, I saw it in their public JIRA account as a bug report ). But nothing seems to be getting done about it.

So, I found a workaround. I ended up not using Ionic’s cropping tool at all. Instead, I used a plugin called Cropperjs ( https://fengyuanchen.github.io/cropperjs/ ). I got a lot of the information on how to implement it from this thread ( Image cropping plugin ). I pulled my implementation together from a few of the posts in there.

First, I created a modal called CropImageModal and I just launch that modal once I get the uncropped image from the camera.

Here is the code for the modal window:

import Cropper from ‘cropperjs’;
import { NavParams, ViewController } from ‘ionic-angular’;
import { Component, ViewChild, ElementRef } from ‘@angular/core’;

@Component({
selector: ‘crop-image-modal’,
template: <div padding text-center> <div><img [src]="imageToCrop" (load)="imageLoaded()" #imageSrc ></div> </div> <p text-center> <button ion-button border round outline (click)="cancel()">CANCEL</button> <button ion-button border round outline (click)="crop()">CROP</button> </p>
})
export class CropImageModal {
@ViewChild(‘imageSrc’) imageInput: ElementRef;
public imageToCrop: any;
public cropper: Cropper;

constructor(public params: NavParams, public viewCtrl: ViewController) {
	this.imageToCrop = params.get('imageToCrop');
}

imageLoaded() {
	console.log("starting Cropper... "); 
	this.cropper = new Cropper(this.imageInput.nativeElement, {
		aspectRatio: 1 / 1,
		dragMode: 'move',
		modal: true,
		guides: true,
		highlight: false,
		background: true,
		autoCrop: true,
		autoCropArea: 0.9,
		responsive: true,
		crop: (e:Cropper.CropperCustomEvent) => {}
	});
}

cancel() {
	this.viewCtrl.dismiss(undefined);
}

crop() {
	let croppedImage:string = this.cropper.getCroppedCanvas({
        width: 500,
        height: 500
    }).toDataURL('image/jpeg', (100 / 100)); // 100 / 100 = photo quality

    this.viewCtrl.dismiss( 
		{ 
			image: croppedImage
		} 
	);
}

}

And here is all of the relevant code from my page file to launch the cropping modal:

//Import cropper modal
import {CropImageModal} from “…/crop-image/crop-image-modal”;

/**

  • Launches native device’s camera.
    */
    takePicture( ){
    if( this.platform.is(‘cordova’) ){
    let cameraOptions = {
    destinationType: Camera.DestinationType.FILE_URI,
    encodingType: 0,
    quality: 100,
    targetWidth: 500,
    targetHeight: 500,
    correctOrientation: true,
    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
    allowEdit: false
    }

    Camera.getPicture(cameraOptions).then((imageData) => {

       	// imageData is the URI for the file
   	this.imageToCrop = imageData;
 	this.launchCropModal();

 }, (err) => {
     console.log( 'Error creating image: ', err);
 });

    }
    }

/**

  • Displays a modal window for the user to crop their selected image.
    */
    launchCropModal(){
    let params = {
    imageToCrop: this.imageToCrop
    };

    let modal = this.modalCtrl.create(CropImageModal, params);

    modal.onDidDismiss(data => {
    if (data) {
    this.childService.child.avatar = this.avatar = data.image;
    this.uploadAvatar();
    }
    });

    modal.present();
    }

5

Thanks for the tips. I will try to implement it in my app.