zoukankan      html  css  js  c++  java
  • 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.照相机参数

     

  • 相关阅读:
    第五周作业
    第四周编程总结
    第六周作业
    2019春第五周作业
    2019年春季学期第四周作业
    2019年春季学期第三周作业
    求最大值及其下标
    7-1
    第十周课程总结
    第九周课程总结&实验报告(七)
  • 原文地址:https://www.cnblogs.com/wskxy/p/9968362.html
Copyright © 2011-2022 走看看