ionic4中调用相机(Camera)

桃扇骨 2021-12-12 10:51 469阅读 0赞

#### 在ionic项目中安装camera插件 ####

[官方地址：][Link 1]

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

#### 显示效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[Link 1]: https://ionicframework.com/docs/native/camera
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211211/c86131f8e99a4b43a7188a719638f045.png