ionic2 @ionic-native/camera-preview应用

ionic2 @ionic-native/camera-preview集成应用

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

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

ionic start myionic2prj blank --v2   //--v2 参数 指示创建ionic2工程 
cd myionic2prj

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

"dependencies": {
    ...
    "@ionic-native/camera": "^3.5.0",
    "@ionic-native/camera-preview": "^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",
    "cordova-plugin-camera-preview"
],

独立安装所需插件
//camera-preview plugin

npm install @ionic-native/camera-preview --save

//cordova-plugin-camera-preview （底层插件）

ionic plugin add cordova-plugin-camera-preview  
// 或执行“cordova plugin add cordova-plugin-camera-preview”  完成后，可执行”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 { CameraPreview } from '@ionic-native/camera-preview';   //1、导入模块

@NgModule({
  providers: [
    ...
    CameraPreview,                                      //2、注册为应用的的服务模块
    ...
  ]
})

src/pages/my-page4/my-page4.scss:

.displaybottom{
  padding-top: 86%;
  bottom: 0;   
}

src/pages/my-page4/my-page4.html:
<ion-header>
    <ion-navbar>
        <ion-title>Camera Preview</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <h5>This is camera Preview Application..</h5>
    <div class="displaybottom">
        <button ion-button (click)="startCamera()"> Start Camera</button>
        <button ion-button (click)="stopCamera()"> Stop Camera</button>
        <button ion-button (click)="takePicture()"> Take Picture Camera</button>
        <button ion-button (click)="SwitchCamera()"> Switch  Camera</button>
        <button ion-button (click)="showCamera()"> Show Camera</button>
        <button ion-button (click)="hideCamera()"> Hide Camera</button>
    </div>
    <div class="pictures">
        <p><img id="previewPicture" width="200" /></p>
        <!--<p><img id="originalPicture" width="200"/></p>-->
    </div>
</ion-content>

src/pages/my-page4/my-page4.ts文件中导入应用:

import { IonicPage, NavController } from 'ionic-angular';
import { Component,NgZone} from "@angular/core";
import { CameraPreview } from '@ionic-native/camera-preview';   //导入模块 

@IonicPage()
@Component({
  selector: 'page-my-page4',
  templateUrl: 'my-page4.html',
})

export class MyPage4 {
    public getWidth: number;
    public getHeight : number;
    public calcWidth : number;
    constructor(private nav: NavController, private zone:NgZone, private cameraPreview:CameraPreview){
        this.zone.run(() => {
            this.getWidth = window.innerWidth;
            this.getHeight = window.innerHeight;
        }); 
        this.calcWidth = this.getWidth - 80;  
    }

    startCamera(){
        this.cameraPreview.startCamera({x: 40, y: 100, width: this.calcWidth, height: 220, toBack: false, previewDrag: true, tapPhoto: true});      
    }

    stopCamera(){
        this.cameraPreview.stopCamera();
    }

    takePicture(){
         this.cameraPreview.takePicture(function(imgData){
            (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
         });
    }

    SwitchCamera(){
        this.cameraPreview.switchCamera();
    }
    showCamera(){
        this.cameraPreview.show();
    }
    hideCamera(){
        this.cameraPreview.hide();
    }
}

7、

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