前言

上一篇文章已经阐述了如何进行ionic项目的快速开发和一些注意事项，接下来这一篇就简单说明一下多图片选择器的使用。
在很多场景中我们都需要用到图片的选择，其中有选择一张图片的，也有选择多张图片的。选择一张图片的话，可以使用cordova-plugin-camera插件，如果需要选择多张图片的话，可以使用cordova-plugin-telerik-imagepicker插件。

安装

在ionic的官网上有imagepicker插件的安装介绍。
步骤一：打开终端，cd进入到你的项目路径，输入：

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

your usage message 是你要访问图片权限的说明，这个是必须写的，否则在iOS平台和android6+平台上，程序会奔溃。

步骤二：需要将安装好后的插件通过npm安装到ionic-native中，这样在后面的页面使用到这个imagepicker的时候，可以导入直接使用。安装命令：

npm install --save @ionic-native/image-picker

使用

1）在app.module.ts中导入

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

2）在app.module.ts中的providers中写入ImagePicker，这个是ionic导入插件的方式。

3）在需要使用到imagepicker的页面的ts文件中导入

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

4）在需要使用到imagepicker的页面的ts文件的constructor中声明一下实例。

constructor(private imagePicker: ImagePicker){ }

5）接着就可以在你的页面中调用imagepicker的API了。

let options = {
  maximumImagesCount: **9**,
  outputType: 0,
  title:"相册"
  width:800,
  height:800,
  quality: 100,
};
this.imagePicker.getPictures(options).then((results) => { 
for(vari =0; i < results.length; i++) { 
console.log('Image URI: '+ results[i]); 
} 
}, (err) => {
});

参数说明：
maximumImagesCount：这个是最多选择的图片数量。
outputType：输出的数据类型，默认是FILE_URI对应的值是0，DATA_URL对应的值是1，也就是编码的base64。
width：图片的宽度。
height：图片的高度。
quality：图片的质量，0最小，100最大。
title：选择器的标题，注意这个一定要写上，否则图片选择页面的标题默认是英文的。

图片的权限

在iOS中，对于图片的选择，这个涉及到隐私，需要得到用户的允许；在android6+之后也加入了用户的权限允许。所以在进行调用imagepicker的API之前一定要先判断一下，是否已经得到用户的权限允许。
hasReadPermission是判断用户是否已经阅读过权限，如果true，则调用getPictures API；如果为false，则调用requsetReadPermession来请求权限弹窗。
需要注意，requsetReadPermession只是弹出一个权限的窗口，窗口中的“允许”和“不允许”按钮是没有回调事件的。正是因为没有回调事件，所以“允许”和“不允许”之后的事件处理就不好操作。
权限处理的完整步骤：
首先，在app的platform ready之后调用requsetReadPermession，此时app启动后就会有一个权限弹窗，不管用户选择“允许”还是“不允许”，然后去到使用相册插件的页面，调起相册的API的时候就要进行判断，如果返回是false，可以弹出一个dialog告知用户相册权限已被禁止，需到手机的“设置”中修改，如果是true，则调用getPictures API。
1）platform ready中：

imagePicker.requestReadPermission();

2）需要调用相册API的页面中：

this.imagePicker.hasReadPermission().then((hasReadPermission)=>{//检查是否已经阅读相册权限
  console.log("--hasReadPermission--" + hasReadPermission);
  if(hasReadPermission == true){//是否允许
    this.getPhotoLibrary();
  }else {
    this.methodsProvider.alertText("相册权限已被您禁止！如需访问相册,请到手机的\"设置\"-\”该app\"-允许相册访问");
  }
});

ps：对于权限弹窗的“允许”和“不允许”没有回调事件，在GitHub上看到有人是这样处理的，还是先调用hasReadPermission ，如果返回false，就调用requsetReadPermession，如果也是返回false，就再次调用hasReadPermission，再次返回false的话，就再调用requsetReadPermession，这样周而复始。对于iOS来说，这样循环调用，权限弹窗始终只有一个，不会因为循环调用requsetReadPermession而导致多个权限弹窗，但是在Xcode上查看CPU一直在上涨，这样是不允许的；对于android来说。循环调用requsetReadPermession，如果此时不要点击权限弹窗的“不再提醒”并且点击“不允许”，那么权限弹窗会一直弹出来，这样也是不允许的。

permission.png

ImagePicker汉化

如果开发的app是给国内的用户使用的话，那么需要对imagepicker进行汉化，可以参考这篇文章。
需要指出说明的是iOS不需要汉化，Resources目录下已经有文件夹zh-Hans.lproj ，但是对于android，则需要在platforms/android/res下创建文件夹values-zh，其下创建文件multiimagechooser_strings_zh.xml。写入：



  图片选择器
  还可以选择 %d 张图片
  打开图像数据库时出错,请反馈问题.
  请求缩略图，请耐心等待
  正在处理...
  请稍等...
  取消
  确定

注意点

1）ionic官网有2个imgaepicker，
https://github.com/wymsee/cordova-imagePicker
这个是比较旧的插件，可以使用，但是不能返回base64，只能返回file uri，如果想要将file uri转换为base64，可以使用file插件中的readAsDataURL API来转换。

let path;
if(this.platform.is('ios')){//ios
  path = this.file.tempDirectory;
}else {
  path = this.file.cacheDirectory;
}
//获取最后一个“/”的index
let index = file_uri.lastIndexOf("\/");
//获取最后一个"/"的内容最为fileName
let fileName = file_uri.substring(index+1,file_uri.length);
this.file.readAsDataURL(path, fileName)
  .then(base64File=>{
});

另一个插件：
https://github.com/Telerik-Verified-Plugins/ImagePicker
这个是ionic官方推荐的，返回可以是base64数据，但是刚开始使用的时候，android在选择图片的时候总是会crash，要查看AndroidManifest文件中是否写入：

也有些人提示修改com.android.support:support 的版本问题。
后面是通过写入移除android平台，再重新加入android，并且写入android.permission.CAMERA解决了问题。
2）在汉化imagepicker的时候，需要给option的title参数赋值，否则图片选择页面的title默认是英文。
3）如果设置了maximumImagesCount，那么再选取完图片之后需要重新设置option的maximumImagesCount。
4）如果返回是file uri，对于android平台，这些文件会存储在临时文件里面，并且app不会自行清除，那么需要手动清除，可以使用file插件的removeFile API来清除。
原文：

When outputType is FILE_URI the plugin returns images that are stored in a temporary directory. These images will often not be deleted automatically though. The files should be moved or deleted after you get their filepaths in javascript. If Base64 Strings are being returned, there is nothing to clean up.

总结

cordova-plugin-camera插件可以直接调用API，不需进行权限的判断，getPictures已经包含了权限的判断，但是只能选去一张图片，而且选完图片之后还有一个图片范围的截取，对于很多应用是没有必要的。因此，只能使用imagepicker插件，在使用这个插件过程中遇到过许多问题，也进行了许多测试，其中最多的问题就是权限的问题和android crash的问题，后面都一一解决了。

ionic多图片选择器-ImagePicker

前言

安装

使用

图片的权限

ImagePicker汉化

注意点

总结

你可能感兴趣的:(ionic多图片选择器-ImagePicker)