离子从相机中排除谷歌照片。PictureSourceType.PHOTOLIBRARY

Posted 2023-05-06

【中文标题】离子从相机中排除谷歌照片。PictureSourceType.PHOTOLIBRARY

【英文标题】：Ionic exclude google photos from camera.PictureSourceType.PHOTOLIBRARY

【发布时间】：2020-03-21 10:27:47

【问题描述】：

我正在使用 ionic 3，我想从我的图库中选择一个图像并裁剪图像，我已经成功创建了这个，但是当我选择谷歌照片而不是图库时出现问题，裁剪编辑器没有' t 出现，图像变得模糊。因此我只想使用图库选项并排除谷歌照片选项。

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

【参考方案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();

【参考方案2】：

我已经在 ionic v1 中实现了这个裁剪代码，我不知道它对你有多大用处。所以我只是与您分享我的代码，以便您有所了解。

navigator.camera.getPicture(gotPhotoLibrary, onError, 
                                    quality: 90,
                                    destinationType: navigator.camera.DestinationType.FILE_URI,
                                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                                    allowEdit: true,
                                    targetWidth: 200, //what widht you want after capaturing
                                    targetHeight: 200
                                );

我使用 plugins.crop.promise 插件来裁剪图像

function gotPhotoLibrary(imageUri) 
                // window.resolveLocalFileSystemURI(imageUri, function (fileEntry) 
                var options = 
                    quality: 150,
                    widthRatio: 1,
                    heightRatio: 1,
                    targetWidth: 600,
                    targetHeight: 600
                ;
                plugins.crop.promise(imageUri, options)
                .then(function success(newPath) 
                    window.resolveLocalFileSystemURI(newPath, function (fileEntry) 
                        fileEntry.file(function (fileObj) 
                            if (fileObj.size <= 153600) 
                                var reader = new FileReader();
                                reader.onload = function () 
                                    var dataURL = reader.result;
                                    self.ProfilePic = dataURL;
                                    setProfilePic();
                                ;
                                reader.readAsDataURL(fileObj);
                            
                            else 
                                //  alert("Please upload image less then 150KB");
                                alertPopup = $ionicPopup.alert(
                                    title: 'Upload image failed!',
                                    template: 'Please upload image less then 150KB!'
                                );
                            

                            console.log("Size = " + fileObj.size);
                        );
                    );
                );