创建一个新的工程
|
1 |
$ ionic start cameraApp blank --v2 --ts |
添加插件
|
1 2 |
$ ionic platform add ios //添加ios平台 $ ionic plugin add cordova-plugin-camera //添加摄像头插件 |
编写拍照所需的js代码
在home.ts文件中，引入Camera
|
1 |
import {Camera} from 'ionic-native'; |
在HomePage类中，创建一个图片的base64编码的属性
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {Camera} from 'ionic-native'; @Component({ templateUrl: 'home.html' }) export class HomePage { public base64Image: string; constructor() {} } |
然后添加一个takePicture方法来调用Camera.getPicture
home.ts的最终文件内容为
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {Camera} from 'ionic-native'; @Component({ templateUrl: 'home.html' }) export class HomePage { public base64Image: string; constructor() { } takePicture(){ Camera.getPicture({ destinationType: Camera.DestinationType.DATA_URL, targetWidth: 1000, targetHeight: 1000 }).then((imageData) => { // imageData is a base64 encoded string this.base64Image = "data:image/jpeg;base64," + imageData; }, (err) => { console.log(err); }); } } |
编写视图代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content class="home"> <ion-card> <ion-card-content> Hello World, this is my camera app <button (click)="takePicture()">Take a Picture</button> Latest Picture: <img [src]="base64Image" *ngIf="base64Image" /> </ion-card-content> </ion-card> </ion-content> |
真机调试
|
1 |
$ ionic run ios --device |
其他参考文章：
Using cordova-camera plugin in your Ionic 2 Apps