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):

Ionic3 UI组件之 ImagePicker的更多相关文章

  1. Ionic3 UI组件之 Gallery Modal

    Gallery Modal可以理解为相册的预览界面.可以显示网络图片,也可以显示base64Image. 在这个例子中,我用来实现图片的预览功能. 相机拍照,或者相册选择图片后,用缩略图组件显示缩略图 ...

  2. Ionic3 UI组件之 PhotoViewer

    PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...

  3. Ionic3 UI组件之 ImageLoader

    ImageLoader:通过后台线程加载图片(异步)并缓存.类似于Glide或者Picasso. 组件特性: 后台线程下载图片,下载速度更快,不使用webview的资源: 缓存图像.图像将在您下次显示 ...

  4. Ionic3 UI组件之 ImageViewer

    组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...

  5. Ionic3 UI组件之 autocomplete

    无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...

  6. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  7. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  8. 这是一个比较全的Android UI 组件

     Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...

  9. AngularJs的UI组件ui-Bootstrap分享(一)

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

随机推荐

  1. DBCC--CHECKDB--使用快照还是表锁

    在SQL SERVER 2005及后续版本中, DBCC CHECKDB运行时不对数据表加排他锁,而使用内部数据库快照来保持数据一致性,内部数据库快照本质是sparse Filestream,使用Sp ...

  2. UE4随笔(一)准备过程

    19号,也就是中国时间20日凌晨,虚幻4放出了"订阅制"这个重磅炸弹,估计出乎大多数人的想象,已经不止一个同事表示"自己的引擎这下没用了". 笔者前天搞定了付款 ...

  3. 《JavaScript模式》一书中提到的一些坑

    1. 应当用数组字面量来创建数组,而不是用new Array() //反模式 var a = new Array('itsy', 'bitsy', 'spider'); //用字面量 var a = ...

  4. 20164317《网络对抗技术》Exp4 恶意代码分析

    1.实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systr ...

  5. OSX - libc++究竟是啥?

    libc++是什么?  libc++是C++标准库的实现! libc++ is an implementation of the C++ standard library, targeting C++ ...

  6. Xshell连接不上Linux

    用Xshell连接Linux的时候报错了: Connecting to 192.168.79.147:22...Could not connect to '192.168.79.147' (port ...

  7. SecurityManager入门

    java安全管理器SecurityManager入门 SecurityManager 每个Java应用都可以有自己的安全管理器,它是防范恶意攻击的主要安全卫士. 安全管理器通过执行运行阶段检查和访问授 ...

  8. jQuery选择器(基础及应用)

    jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要 ...

  9. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  10. 一元运算符 +,可用于将变量转换为数字;如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字)

    一元运算符,可用于将变量转换为数字: var y = "5"; var x = + y; console.log(typeof y);//string 类型 console.log ...