ionic2 调用相机、相册及图片预览

一、背景介绍

最近公司项目中用到ionic2重构app，在研究相机调用的时候发现官方API似乎有点误导人，所以在这里介绍下我的实际经验

官方相机API（这个参考就行了，有错的，文章最后分析）
官方图片预览API （这个同样的毛病）

当前官方最新ionic版本：2.3.0
我的ionic版本：2.2.11
但是因为native API文档侧栏中没有版本的选择，所以我估计还是官方文档有错误的可能性比较大

PS: 如果调用后打包出错，请看ionic2 编译失败（You have not accepted the license agreements of the following SDK components）

二、调用相机

1. 安装依赖

ionic plugin add cordova-plugin-camera  //相机依赖
ionic plugin add com-sarriaroman-photoviewer  //图片预览依赖

2. 在调用页面的ts文件中引入

import { Camera, PhotoViewer } from 'ionic-native';

3. 调用相机

public base64Img:  string = '';
public takePicture(){
    //相机参数配置
    const options = {
      quality: 50,  //照片质量，1-100，默认50
      destinationType: Camera.DestinationType.DATA_URL,  //返回的数据类型，默认DATA_URL
      enodingType: Camera.EncodingType.JPEG,  //照片格式，默认JPEG，还有PNG可选
      mediaType: Camera.MediaType.PICTURE,  //媒体类型，默认PICTURE->照片，还有VIDEO等可以选
      sourceType: Camera.PictureSourceType.CAMERA  //来源类型，默认CAMERA->相机，还有PHOTOLIBRARY->相册等可以选
    }

    Camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64:
     this.base64Img = 'data:image/jpeg;base64,' + imageData;
     console.log(this.base64Img)
    }, (err) => {
     // Handle error
     console.log(err)
    });
  }

4. 调用相册（其实就改下options.sourceType ）

public base64Img:  string = '';
public takePicture(){
    //相机参数配置
    const options = {
      quality: 50,  //照片质量，1-100，默认50
      destinationType: Camera.DestinationType.DATA_URL,  //返回的数据类型，默认DATA_URL
      enodingType: Camera.EncodingType.JPEG,  //照片格式，默认JPEG，还有PNG可选
      mediaType: Camera.MediaType.PICTURE,  //媒体类型，默认PICTURE->照片，还有VIDEO等可以选
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY//来源类型，默认CAMERA->相机，还有PHOTOLIBRARY->相册等可以选
    }

    Camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64:
     this.base64Img = 'data:image/jpeg;base64,' + imageData;
     console.log(this.base64Img)
    }, (err) => {
     // Handle error
     console.log(err)
    });
  }

5. 图片预览

public PhotoViewer(){
    PhotoViewer.show(this.base64Img, '拍摄照片')
}

6. 页面调用方法

<button ion-button full (click)="takePicture()">拍摄照片</button>  //调用相机
<button ion-button full (click)="choosePicture()">选择照片</button>  //调用相册
<ion-img width="150" src={{base64Img}} (click)="PhotoViewer()"></ion-img>  //照片预览

三、效果展示

调用相机.jpg 图片预览.jpg

四、官网错误原因分析

1. 以下是官网上的调用方式：

   
   官网调用.png
2. 实际掉用错误之一
   首先像官网那样在构造函数中注入camera实例，实际调用this.camera时报错，报错提示getPicture方法不在Camera类中
   报错1.png
   查看Camera原始代码，发现getPicture方法是static静态方法，所以不能够使用Camera类的实例去掉用，也就是说此处不用进行依赖注入，
   直接掉用Camera.getPicture()就行
   `getPicture`方法.png
   而且文档内部的调用注释写的很清楚
   文档内部掉用注释.png
3. 实际掉用错误之二
   定义相机配置参数options的时候，限定类型为CameraOptions，实际使用时，会导致encodingType属性报错，说其不在CameraOptions中，但实际上的确是有定义的，这个暂时还没想明白为什么
   CameraOptions使用报错
   CameraOptions错误.png
   CameraOptions源码中的确包含encodingType
   CameraOptions源码.png