相机拍照和相册是 App 从手机获取图片的两种主要方式。在 App 业务需求中，经常会使用到图片获取的功能，最为常见的有用户头像设置等。
既然是常用功能，这一次我们就来分析一下如何在 ionic3 中使用相机和相册获取图片。

#目录：

• 插件介绍
• 使用方法
• 图片上传
• 注意事项

插件介绍

cordova-plugin-camera 相机插件：

安装方法：

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

作用：
调用手机照相头，进行拍照获取图片、从相册获取单张图片。

cordova-plugin-image-picker 图片获取插件：

安装方法：

// 注意： 
// 这个 "your usage message" 可以自己修改
// 这是在向用户请求权限时显示的文字

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
$ npm install --save @ionic-native/image-picker

作用：
调用手机图库，获取照片，可选择多张。

使用方法：

先把插件添加到 app.module.ts 的 providers

Camera

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor( ...
  private camera: Camera) { }

// 设置选项
const options: CameraOptions = {
  quality: 100,
  sourceType: this.camera.PictureSourceType.CAMERA,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

// 获取图片
this.camera.getPicture(options).then((imageData) => {
// 获取成功
let base64Image = 'data:image/jpeg;base64,' + imageData;

}, (err) => {
  console.log('获取图片失败');
});

理解起来应该不难，详细解释一下 CameraOptions

重点说一下 sourceType，这个参数设置为 PHOTOLIBRARY 就会从相册取图，设置为 CAMERA 会拍照，设置为 SAVEDPHOTOALBUM 会保存图片。

ImagePicker

import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';


constructor( ...
  private imagePicker: ImagePicker) { }

// 设置选项
const options: ImagePickerOptions = {
  maximumImagesCount: 6,
  width: IMAGE_SIZE,
  height: IMAGE_SIZE,
  quality: QUALITY_SIZE
};

// 获取图片
this.imagePicker.getPictures(options).then((results) => {
  for (var i = 0; i < results.length; i++) {
      console.log('Image URI: ' + results[i]);
  }
}, (err) => {
  console.log('获取图片失败');
});

跟上面那个差不多，详细解释一下 ImagePickerOptions

图片上传

如果是 base64 图片上传，直接把二进制字符串作为参数传就好。
另一种方式就按照 ionic3 文件上传下载和预览 的方法来就行

注意事项

iOS 无法打开相册

再执行一遍

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"

我们执行过后，会有一个插件 com.synconset.imagepicker 生成到 package.json 中，这个会导致 npm install 运行失败，解决方法只能把它删除。所以你再次安装的时候就会少一个这个插件，导致无法获取相册权限。Android 上没有这个问题。

参考资料：
https://github.com/Telerik-Verified-Plugins/ImagePicker/issues/71#issuecomment-323993112

ImagePickerOptions 的类型 maximumImagesCount：

源代码中的注释：

max images to be selected, defaults to 15. If this is set to 1, 
upon selection of a single image, the plugin will return it. (Android only)

默认 15张没问题，设置为 1 的时候，在安卓上插件会返回。我并没有没试过，遇到问题的朋友可以参考这个注释

ImagePickerOptions 的类型 outputType：

源代码中的注释：

Output type, defaults to 0  (FILE_URI).

并没有说清除传其他数字会怎么样，我们使用默认值就好。

赏

如果文章对你有帮助，欢迎请我喝杯咖啡~

支付宝

微信