Ionic从camera.PictureSourceType.PHOTOLIBRARY中排除Google照片

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。mileven想要引起更多关注来回答这个问题。

我使用离子3，我想从图库和裁剪图片中选择一张图片，我已经成功创建了图片，但是问题是当我选择Google照片而不是图库时，裁剪编辑器没有显示起来因此，我只想使用Gallery选项，但不包括google photos选项。

        options.sourceType = this.camera.PictureSourceType.PHOTOLIBRARY
        this.camera.getPicture(options).then((imageData) => {  
          this.base64Image = imageData.replace('file://','');
          // for cropping image
          let modal = this.modal.create('CanvaseditPage',{data:"data:image/jpeg;base64," + imageData});
          modal.present();
        }, (err) => {
          console.log(err);
        });

Answer 1

[我发现这是Cordova中的一个已知问题（至少，我在其公共JIRA帐户中将其视为错误报告）。但是似乎什么也没做。

因此，我找到了一种解决方法。我最终根本没有使用Ionic的裁剪工具。相反，我使用了一个名为Cropperjs（https://fengyuanchen.github.io/cropperjs/ 13）的插件。我从该线程（图像裁剪插件13）获得了很多有关如何实现它的信息。我从那里的一些帖子中总结了自己的实现。

首先，我创建了一个名为CropImageModal的模态，一旦从相机获取未裁剪的图像，我就启动该模态。

这是模式窗口的代码：

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

这是我的页面文件中的所有相关代码，用于启动裁剪模式：

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

//Launches the 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();
}