ionic3 相机和相册获取图片

相机拍照相册是 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

CameraOptions 作用 参数
quality 图像质量,越高质量越好 (0-100) number
sourceType 图片源 PHOTOLIBRARY、CAMERA、SAVEDPHOTOALBUM
destinationType 图片路径 DATA_URL、FILE_URL、NATIVE_URI
encodingType 图片类型 JPEG、PNG
mediaType 媒体类型,这个插件也能选视频等 PICTURE、VIDEO、ALLMEDIA

重点说一下 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**

ImagePickerOptions 作用 参数
maximumImagesCount 最多选几张,默认 15 number
width 图片宽度 number
height 图片高度 number
quality 图像质量,越高质量越好 (0-100) number
outputType 输入类型,默认为 0 (FILE_URI) number

图片上传

如果是 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).

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 打开手机,时间显示在0:35,诺大的房间,唯有我心跳加速的声音。 我的护身符不见了。那是一串红珊瑚,家里人说红珊瑚...
    多多掌柜阅读 519评论 4 1
  • 上个月29日,我被确诊为单纯发作中度重性抑郁障碍,简单理解就是,我得了抑郁症。 在此之前,我的恋人因重度抑郁症去世...
    老月一阅读 1,675评论 1 0
  • 1 这几天天气都不怎么好,连着下了几天的雨,晚上上完自习课出来,天地间都是白茫茫的一片,鼻尖都是水汽的味道,心里突...
    希希兮兮阅读 272评论 4 3