ionic4中调用相机(Camera)

在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);
        });
    }

}

显示效果