在ionic项目中安装camera插件
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
在对应的模块中导入
tab1.module.ts
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: Tab1Page }])
],
declarations: [Tab1Page],
providers: [Device, Camera]
})
export class Tab1PageModule {}
在对应的ts文件中导入并使用
tab1.page.ts
import { Component } from '@angular/core';
import { Device } from '@ionic-native/device/ngx';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor(
private device: Device,
private camera: Camera
) {
// alert(JSON.stringify(this.device.uuid));
console.log(this.device.uuid);
}
base64Img = '';
handleCamera() {
const options: CameraOptions = {
quality: 100, // 图片质量
destinationType: this.camera.DestinationType.DATA_URL, // 返回类型 .FILE_URI 返回文件地址 .DATA_URL 返回base64编码
encodingType: this.camera.EncodingType.JPEG, // 图片格式 JPEG=0 PNG=1
mediaType: this.camera.MediaType.PICTURE, // 媒体类型
sourceType: this.camera.PictureSourceType.CAMERA, // 图片来源 CAMERA相机 PHOTOLIBRARY 图库
allowEdit: true, // 允许编辑
targetWidth: 300, // 缩放图片的宽度
targetHeight: 300, // 缩放图片的高度
saveToPhotoAlbum: false, // 是否保存到相册
correctOrientation: true, // 设置摄像机拍摄的图像是否为正确的方向
};
this.camera.getPicture(options).then((imageData) => {
const base64Image = 'data:image/jpeg;base64,' + imageData;
this.base64Img = base64Image;
}, (err) => {
alert(err);
});
}
}