一、背景介绍
最近公司项目中用到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）
二、调用相机
- 安装依赖
ionic plugin add cordova-plugin-camera //相机依赖
ionic plugin add com-sarriaroman-photoviewer //图片预览依赖
- 在调用页面的ts文件中引入
import { Camera, PhotoViewer } from 'ionic-native';
- 调用相机
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)
});
}
- 调用相册（其实就改下
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)
});
}
- 图片预览
public PhotoViewer(){
PhotoViewer.show(this.base64Img, '拍摄照片')
}
- 页面调用方法
<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
四、官网错误原因分析
-
以下是官网上的调用方式：
官网调用.png - 实际掉用错误之一
首先像官网那样在构造函数中注入camera实例，实际调用this.camera时报错，报错提示getPicture方法不在Camera类中
报错1.png
查看Camera原始代码，发现getPicture方法是static静态方法，所以不能够使用Camera类的实例去掉用，也就是说此处不用进行依赖注入，
直接掉用Camera.getPicture()就行
`getPicture`方法.png
而且文档内部的调用注释写的很清楚
文档内部掉用注释.png - 实际掉用错误之二
定义相机配置参数options的时候，限定类型为CameraOptions，实际使用时，会导致encodingType属性报错，说其不在CameraOptions中，但实际上的确是有定义的，这个暂时还没想明白为什么
CameraOptions使用报错
CameraOptions错误.png
CameraOptions源码中的确包含encodingType
CameraOptions源码.png
