如何在 Ionic 2 中使用原生智能手机摄像头？答案

【问题标题】：How can I use the native smartphone camera in Ionic 2?如何在 Ionic 2 中使用原生智能手机摄像头？
【发布时间】：2016-01-09 16:14:02
【问题描述】：

Ionic 1 似乎有一些允许您执行此操作的 cordova 插件。我真的需要一步一步地了解如何使用 Ionic 2 进行此操作。网上似乎没有可用的资源。

谢谢！

【问题讨论】：

您找到解决方案了吗？以下答案对我不起作用。
我暂时停止寻找。如果有人可以担保以下其中一项/替代方案，我会将其标记为已解决。
@happycoder ：我已经为这个问题添加了一个新答案，并且它工作得很好。

标签： cordova mobile camera ionic cordova-plugins

【解决方案1】：

在您的项目文件夹中，运行：

$ ionic plugin add cordova-plugin-camera --save

然后，您就可以将 navigator.camera 用作全局。

import {Page, Platform, NavParams} from 'ionic/ionic'; import {NgZone} from 'angular2/core';






constructor(platform:Platform, navParams: NavParams, _zone : NgZone) {
this._zone = _zone;
this.platform = platform;
this.images = [];}



takePhoto() {
this.platform.ready().then(() => {
  let options = {
    quality: 80,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: false,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: false
  };
  // https://github.com/apache/cordova-plugin-camera#module_camera.getPicture
  navigator.camera.getPicture(
    (data) => {
      let image = "data:image/jpeg;base64," + data;
       this._zone.run(()=> this.images.unshift({
         src: image
       }))
    }, (error) => {
      alert(error);
    }, options
  );
});}

在这里做了一个演示项目；仅在 Android 中测试，请试用。

https://github.com/marcusasplund/ionic2-camera-demo/

【讨论】：

【解决方案2】：

第 1 步：通过运行以下命令添加 ionic-native：

npm install ionic-native --save

Step2: 添加`cordova camera plugin` 用于添加相机图像或从图库中选择图像。

运行以下命令将插件添加到您的项目中：

cordova plugin add cordova-plugin-camera

使用插件的示例代码：

// Returns a image path location of  : file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1460010653820.jpg
takeNewImage(){
    var option = {
        sourceType:1,
        quality: 20,
        destinationType: 0,
        encodingType: 0
    };
    Camera.getPicture(option).then((imageData)=>{
        this.cameraSuccessCallback(imageData);
    },(error)=>{
        this.cameraErrorCallback(error);
    });
}
// Returns a file URI : content://media/external/images/media/51516
chooseImage(){
    var option = {
        sourceType:0,
        quality: 20,
        destinationType: 0,
        encodingType: 0
    };
    Camera.getPicture(option).then((imageData)=>{
        this.cameraSuccessCallback(imageData);
    },(error)=>{
        this.cameraErrorCallback(error);
    });
}
cameraSuccessCallback(imageData) {
    console.log("Getting image data as base64 string from camera/Gallery success.");
    console.log(imageData);
    var cardImage = document.getElementById("image-preview");
    cardImage.src = "data:image/jpeg;base64,"+imageData;
}

cameraErrorCallback(message) {
    alert('Loading image failed due to: ' + message);
}

imageData 是图片的 base64 字符串值。

参考

【讨论】：

【解决方案3】：

安装ionic-native并添加您需要的plugin：

$ npm install ionic-native --save-dev

$ ionic plugin add phonegap-plugin-barcodescanner --save

然后在你的代码中：

...
import {BarcodeScanner} from 'ionic-native/dist/index';


@Injectable()
export class SomeClass {

    someMethod() {
        return BarcodeScanner.scan().then(data => {
            ...
        }, (error) => {
            ...
        });
    }
}

【讨论】：

第 1 步：通过运行以下命令添加 ionic-native：

Step2: 添加cordova camera plugin 用于添加相机图像或从图库中选择图像。

使用插件的示例代码：

参考

Step2: 添加`cordova camera plugin` 用于添加相机图像或从图库中选择图像。