相机预览 takePicture 功能不起作用 Ionic？答案

【问题标题】：Camera preview takePicture function not working Ionic?相机预览 takePicture 功能不起作用 Ionic？
【发布时间】：2017-09-22 14:02:08
【问题描述】：

我正在尝试让 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});

}


}

科尔多瓦 CLI：6.5.0

Ionic 框架版本：3.0.1

Ionic CLI 版本：2.2.3

Ionic App Lib 版本：2.2.1

Ionic 应用脚本版本：1.3.0

ios-deploy 版本：未安装

ios-sim 版本：未安装

操作系统：Windows 10

节点版本：v6.10.0

Xcode 版本：未安装

【问题讨论】：

你检查过日志吗？
不，问题是如果我写下面的代码会报错：CameraPreview.takePicture(function(base64PictureData){ /* code here */ });
你得到哪个错误？
如果你使用的是 ionic-native 3，你需要使用你注入的对象而不是类 ionicframework.com/docs/native
你能再解释一下吗？我是 Ionic 的新手，并且已经尝试了所有方法。

标签： ionic-framework cordova-plugins ionic3

【解决方案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 上还没有。

【讨论】：