ionic 照相机 Camera

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.照相机参数

 

猜你喜欢

转载自www.cnblogs.com/wskxy/p/9968362.html