ImagePicker插件实现设备上的多个图像选择的功能。

组件特性:

  • 统一选择界面,避免不同设备选择界面不一样的问题;
  • 支持多选,并且可以设置最多选择的张数;
  • 选择数量超出设置时会提示;
  • Camera.PictureSourceType.PHOTOLIBRARY里面只能单选,对于多图像的情况下会比较麻烦。

参考地址:

  https://github.com/Telerik-Verified-Plugins/ImagePicker

=============================================================================

1)安装包和插件:

cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker.git

这里发现一个奇怪的问题,参考官网的教程,使用:

ionic cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker.git时安装出错,如下:

暂未找到原因。后来直接使用cordova plugin add才安装成功。另外就是需要提前安装好git客户端,这里不做介绍。

继续,别忘了安装包:npm install --save @ionic-native/image-picker

添加好的插件,可以从你的项目目录中找到:

2)在app.module.ts中增加:

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

providers:[]里面同样加上ImagePicker;
3)在使用的页面中,增加:
import { ImagePicker } from '@ionic-native/image-picker';
别忘了构造器。
4)具体使用:

ImagePickerOptions参见官网。

5)实现效果:

 

统一的选择组件界面,支持多选,选择后有阴影遮罩效果;超出数量设置时会提示;

如果不使用此组件,使用Camera插件的PHOTOLIBRARY,会出现的问题就是无法多选,并且选择界面依赖于手机的操作系统,

不同的手机可能会出现选择界面不一致的情况,影响用户体验。如下(华为Mate7,EMUI4.0,Android6.0):

最新文章

  1. poj 1236 Network of Schools(连通图)
  2. JavaScript 与函数式编程
  3. .NET 分页
  4. 新版福昕阅读器(Foxit Reader)启动速度慢解决办法
  5. JS浏览器对象-window对象
  6. truncate 和 delete 差异
  7. OCP-1Z0-051-题目解析-第3题
  8. 应届毕业生如何通过学习Linux系统选择一份高薪职业
  9. 布隆(Bloom)过滤器 JAVA实现
  10. 如何将Eclipse的javaWeb项目改为IDEA的maven项目
  11. Linux命名空间
  12. Java 注解原理
  13. 【题解】Luogu P2763 试题库问题
  14. 杭电ACM 1297 Children’s Queue
  15. [Android] 旋转照片/图片
  16. 【译】SQLskills SQL101:Trace Flags、ERRORLOG、Update Statistics
  17. I/O模型(同步、非同步、阻塞、非阻塞)总结
  18. 8 -- 深入使用Spring -- 2...4 使用@PostConstruct和@PreDestroy定制生命周期行为
  19. 图像处理之FPN校正
  20. 密码分析:使用 Ettercap 和 它的 ARP 毒化功能来嗅探流量

热门文章

  1. python——回文函数(reversed)
  2. 配置阿里yum源,设置命令
  3. Java基础学习篇---------String、集合的学习
  4. django 视图中执行原生的 sql 查询语句
  5. django 使用celery 实现异步任务
  6. 前端入门CSS(2)
  7. 鬼知道是啥系列之——STL(lower_bound(),upper_bound() )
  8. Mybatis的cache
  9. linux 服务器性能监控(一)
  10. MVC各部分技术体现