ionic2 @ionic-native/camera应用

ionic2 @ionic-native/camera集成应用

demo: https://github.com/wangzuxing/myionic2camera

1、创建项目工程(命令行方式)

ionic start myionic2camera blank --v2   //--v2 参数 指示创建ionic2工程 myionic2prjcd myionic2camera

2、
在package.json中添加(根据应用所需功能添加相应依赖项)：
添加项目依赖

"dependencies": {    ...    "@ionic-native/camera": "^3.5.0",    ...    "ionic-native": "^3.5.0",    ...},

添加cordovaPlugins项
内容包括一些常用cordova plugin和你所需插件cordova-plugin-camera
（项目创建默认是不包括此”cordovaPlugins”项的，个人应用发现必须添加，ionic plugin add ×××安装插件也必须在cordovaPlugins项添加相应支持
—底层打包确实是由cordova完成的）

"cordovaPlugins": [    "cordova-plugin-whitelist",    "cordova-plugin-console",    "ionic-plugin-keyboard",    "cordova-plugin-statusbar",    "cordova-plugin-device",    "cordova-plugin-splashscreen",    "cordova-plugin-camera"],

独立安装所需插件

//Camera pluginnpm install @ionic-native/camera --save//cordova-plugin-camera （底层插件）ionic plugin add cordova-plugin-camera // 或执行“cordova plugin add cordova-plugin-camera”  完成后，可执行”ionic plugin list“命令显示项目已安装插件

3、
npm install //或使用”cnpm install” 主要完成安装所需模块（根据package.json中的配置参数指明所需模块）到node_modules目录，同时会生成相应的配置项在config.xml中

4、

ionic platform add android             // 添加platform支持 

5、
src/app/app.module.ts 添加：

import { Camera } from '@ionic-native/camera';   //1、导入模块@NgModule({  providers: [    ...    Camera,                                      //2、注册为应用的的服务模块    ...  ]})

src/pages/home/home.html:

<ion-header>  <ion-navbar>    <ion-title>      Camera    </ion-title>  </ion-navbar></ion-header><ion-content padding>  <button (click)="takepic()">Click</button>  <ion-card>      <img [src]="image">  </ion-card></ion-content>

src/pages/home/home.ts文件中导入应用:

import { Component } from '@angular/core';import { NavController } from 'ionic-angular';import { Camera } from '@ionic-native/camera';  //导入模块 @Component({  selector: 'page-home',  templateUrl: 'home.html'})export class HomePage {    image : string;    camera: Camera;    constructor(public navCtrl: NavController, camera: Camera) {        this.image = null;        this.camera = camera;    }    takepic() {        var options = {            destinationType: 0,            sourceType: 1,            encodingType: 0,            quality:100,            allowEdit: false,            saveToPhotoAlbum: false        };        this.camera.getPicture(options).then((data) => {            var imgdata = "data:image/jpeg;base64," + data;            this.image = imgdata;        }, (error) => {            alert(error);        });    }} 

7、

ionic run android                      //android真机/模拟器调试