相機預覽takePicture函數不工作離子？

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

} 


} 

科爾多瓦CLI：6.5.0

離子Framework版本：3.0.1

離子CLI版本：2.2.3

離子應用Lib版本：2.2.1

Ionic App腳本版本：1.3.0

IOS部署版本：未安裝

IOS-SIM版本：未安裝

操作系統：Windows 10

節點版本：v6.10.0

的Xcode版本：未安裝

Answer 1

那麼這很晚了，無論如何，這可能會幫助有人看着相同的問題，

this.profilePhotoOptions = { 
     quality: 50, 
     targetWidth: 384, 
     targetHeight: 384, 
     destinationType: this.camera.DestinationType.DATA_URL, 
     encodingType: this.camera.EncodingType.JPEG, 
     correctOrientation: true 
    }; 

//我用這個，所以我可以上傳到火力存儲

imgURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
    var array = []; 
    for (var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], { 
     type: mimeString 
    }); 
    } 

//然後

this.camera.getPicture(this.profilePhotoOptions).then((imageData) => { 
     // Process the returned imageURI. 
     let imgBlob = this.imgURItoBlob("data:image/jpeg;base64," + imageData); 
     let metadata = { 
     'contentType': imgBlob.type 
     }; 
//then upload or do what ever you want with your SEXEY photo 
    } 

Answer 2

取而代之的是

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

使用本作toBack後假它會將相機預覽帶到前面。

// 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呢。