Question

我正在尝试让takePicture函数工作并获取imageData，但到目前为止还没有运气。我尝试了新的Beta插件Camera Preview，但根本无法启动相机。

我有插件com.mbppower.camerapreview和npm install --save @ ionic-native / camera-preview。

我只需要从takePicture获取imageData，但不知道怎么做？

这是代码：

import { Component, NgZone } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';


import firebase from 'firebase';
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
import { Diagnostic } from 'ionic-native';
import { File } from 'ionic-native';


import { AlertProvider } from '../../providers/alertprovider';
import { ImageProvider } from '../../providers/imageprovider';

declare var cordova: any; // global variable for paths
 @Component({
  selector: 'page-upload',
  templateUrl: 'upload.html'
})

export class UploadPage {
  public user: any;

  constructor(private nav: NavController, private zone:NgZone, private 
  cameraPreview: CameraPreview, public diagnostic: Diagnostic, public 
  toastCtrl: ToastController,
  public imageProvider: ImageProvider, public alertProvider: AlertProvider){

}

ionViewDidEnter(){

    this.checkPermissions();
}

ionViewWillLeave() {

    CameraPreview.stopCamera();
}

checkPermissions() {

    Diagnostic.isCameraAuthorized().then((authorized) => {
        if(authorized)
            this.initializePreview();
        else {
            Diagnostic.requestCameraAuthorization().then((status) => {
                if(status == Diagnostic.permissionStatus.GRANTED)
                    this.initializePreview();
                else {
                    // Permissions not granted
                    // Therefore, create and present toast
                    this.toastCtrl.create(
                        {
                            message: "Cannot access camera", 
                            position: "bottom",
                            duration: 5000
                        }
                    ).present();
                }
            });
        }
    });
}   

initializePreview() {
    // Make the width and height of the preview equal 
    // to the width and height of the app's window
    let previewRect: CameraPreviewRect = {
    x: 0,
    y: 57,
    width: window.innerWidth,
    height: window.innerHeight/2
    };

    // More code goes here
    // Start preview
    CameraPreview.startCamera(
        previewRect, 
        'rear', 
        true, 
        true, 
        false,
        1
    );

    CameraPreview.setOnPictureTakenHandler().subscribe((imageData) => {
        // Process the returned imageURI.
        let imgBlob = this.imageProvider.imgURItoBlob("data:image/jpeg;base64," + imageData);
        let metadata = {
            'contentType': imgBlob.type
        };

        firebase.storage().ref().child('images/' + this.user.userId + '/cards' + '/' + this.imageProvider.generateFilename()).put(imgBlob, metadata).then((snapshot) => {
            // URL of the uploaded image!
            let url = snapshot.metadata.downloadURLs[0];

        }).catch((error) => {
            this.alertProvider.showErrorMessage('image/error-image-upload');
        });


    });
}

takePicture() {

    CameraPreview.takePicture({maxWidth: 1280, maxHeight: 1280});

}


}

Cordova CLI：6.5.0

Ionic Framework版本：3.0.1

离子CLI版本：2.2.3

Ionic App Lib版本：2.2.1

Ionic App Scripts版本：1.3.0

ios-deploy版本：未安装

ios-sim版本：未安装

操作系统：Windows 10

节点版本：v6.10.0

Xcode版本：未安装

Answer 1

而不是这个

 // More code goes here
// Start preview
CameraPreview.startCamera(
    previewRect, 
    'rear', 
    true, 
    true, 
    false,
    1
)

使用此make toBack false它会将相机预览带到前面。

 // More code goes here
// Start preview
CameraPreview.startCamera(
    previewRect, 
    'rear', 
    false, 
    true, 
    false,
    1
)

如果这不能解决您的问题，请删除该相机插件并使用最新的

ionic plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git

这有新修复，但尚未在npm上提供。

相机预览takePicture功能无法工作离子？

1 个答案: