android - Ionic 从 camera.PictureSourceType.PHOTOLIBRARY 中排除谷歌照片

Question

我正在使用 ionic 3，我想从我的画廊中选择一张图片并裁剪图像，我已经成功创建了这个，但是当我选择 google photos 而不是画廊时出现问题，裁剪编辑器没有t 出现，图像变得模糊。因此我只想使用 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 中的一个已知问题(至少，我在他们的公共(public) JIRA 帐户中看到它作为错误报告)。但似乎什么都没有做。

所以，我找到了解决方法。我最终根本没有使用 Ionic 的裁剪工具。相反，我使用了一个名为 Cropperjs ( https://fengyuanchen.github.io/cropperjs/ 13 ) 的插件。我从这个线程(Image cropping plugin 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();
}