1.官网:
https://ionicframework.com/docs/native/camera/#DestinationType
2.引入插件
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
3.在app.module.ts里面引用
import { Camera } from '@ionic-native/camera';
providers:[ Camera ]
4.新建一个CameraPage 用来作例子
ts:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Camera,CameraOptions } from '@ionic-native/camera'; /** * Generated class for the CameraPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-camera', templateUrl: 'camera.html', }) export class CameraPage { public base64Image; constructor(public navCtrl: NavController, public navParams: NavParams,public camera:Camera) { } doCamera(){ const options: CameraOptions = { quality: 70,//图片质量 destinationType: this.camera.DestinationType.DATA_URL,//返回base64地址 encodingType: this.camera.EncodingType.JPEG, sourceType:this.camera.PictureSourceType.CAMERA, // mediaType: this.camera.MediaType.PICTURE, allowEdit:true, targetWidth:300, /*宽度高度要设置*/ targetHeight:300, saveToPhotoAlbum:true, } this.camera.getPicture(options).then((imageData) => { this.base64Image = 'data:image/jpeg;base64,'+imageData; //拍照地址 console.log(this.base64Image); }, (err) => { }); } }
html:
<ion-content padding> <button ion-button color="secondary" (click)="doCamera()">拍照</button> <img *ngIf="base64Image" [src]="base64Image" /> <a>{{base64Image}}</a> </ion-content>
5.照相机参数