相机拍照和相册是 App 从手机获取图片的两种主要方式。在 App 业务需求中,常常会使用到图片获取的功能,最为常见的有用户头像设置等。
既然是经常使用功能,这一次咱们就来分析一下如何在 ionic3 中使用相机和相册获取图片。git
cordova-plugin-camera 相机插件:
安装方法:github
$ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera
做用:
调用手机照相头,进行拍照获取图片、从相册获取单张图片。apache
cordova-plugin-image-picker 图片获取插件:
安装方法:npm
// 注意: // 这个 "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
做用:
调用手机图库,获取照片,可选择多张。json
先把插件添加到 app.module.ts 的 providerssegmentfault
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('获取图片失败'); });
理解起来应该不难,详细解释一下 CameraOptionsapp
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 会保存图片。ionic
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('获取图片失败'); });
跟上面那个差很少,详细解释一下 ImagePickerOptionside
ImagePickerOptions | 做用 | 参数 |
---|---|---|
maximumImagesCount | 最多选几张,默认 15 | number |
width | 图片宽度 | number |
height | 图片高度 | number |
quality | 图像质量,越高质量越好 (0-100) | number |
outputType | 输入类型,默认为 0 (FILE_URI) | number |
若是是 base64 图片上传,直接把二进制字符串做为参数传就好。
另外一种方式就按照 ionic3 文件上传下载和预览 的方法来就行this
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-Ve...
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).
并无说清除传其余数字会怎么样,咱们使用默认值就好。