Ionic3 UI组件之 ImagePicker
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';

ImagePickerOptions参见官网。
5)实现效果:
统一的选择组件界面,支持多选,选择后有阴影遮罩效果;超出数量设置时会提示;
如果不使用此组件,使用Camera插件的PHOTOLIBRARY,会出现的问题就是无法多选,并且选择界面依赖于手机的操作系统,
不同的手机可能会出现选择界面不一致的情况,影响用户体验。如下(华为Mate7,EMUI4.0,Android6.0):
Ionic3 UI组件之 ImagePicker的更多相关文章
- Ionic3 UI组件之 Gallery Modal
Gallery Modal可以理解为相册的预览界面.可以显示网络图片,也可以显示base64Image. 在这个例子中,我用来实现图片的预览功能. 相机拍照,或者相册选择图片后,用缩略图组件显示缩略图 ...
- Ionic3 UI组件之 PhotoViewer
PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...
- Ionic3 UI组件之 ImageLoader
ImageLoader:通过后台线程加载图片(异步)并缓存.类似于Glide或者Picasso. 组件特性: 后台线程下载图片,下载速度更快,不使用webview的资源: 缓存图像.图像将在您下次显示 ...
- Ionic3 UI组件之 ImageViewer
组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...
- Ionic3 UI组件之 autocomplete
无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...
- iOS之UI组件整理
作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...
- Atitit.web ui 组件化 vs mvc
Atitit.web ui 组件化 vs mvc 组件化 与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...
- 这是一个比较全的Android UI 组件
Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...
- AngularJs的UI组件ui-Bootstrap分享(一)
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
随机推荐
- DBCC--CHECKDB--使用快照还是表锁
在SQL SERVER 2005及后续版本中, DBCC CHECKDB运行时不对数据表加排他锁,而使用内部数据库快照来保持数据一致性,内部数据库快照本质是sparse Filestream,使用Sp ...
- UE4随笔(一)准备过程
19号,也就是中国时间20日凌晨,虚幻4放出了"订阅制"这个重磅炸弹,估计出乎大多数人的想象,已经不止一个同事表示"自己的引擎这下没用了". 笔者前天搞定了付款 ...
- 《JavaScript模式》一书中提到的一些坑
1. 应当用数组字面量来创建数组,而不是用new Array() //反模式 var a = new Array('itsy', 'bitsy', 'spider'); //用字面量 var a = ...
- 20164317《网络对抗技术》Exp4 恶意代码分析
1.实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systr ...
- OSX - libc++究竟是啥?
libc++是什么? libc++是C++标准库的实现! libc++ is an implementation of the C++ standard library, targeting C++ ...
- Xshell连接不上Linux
用Xshell连接Linux的时候报错了: Connecting to 192.168.79.147:22...Could not connect to '192.168.79.147' (port ...
- SecurityManager入门
java安全管理器SecurityManager入门 SecurityManager 每个Java应用都可以有自己的安全管理器,它是防范恶意攻击的主要安全卫士. 安全管理器通过执行运行阶段检查和访问授 ...
- jQuery选择器(基础及应用)
jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- 一元运算符 +,可用于将变量转换为数字;如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字)
一元运算符,可用于将变量转换为数字: var y = "5"; var x = + y; console.log(typeof y);//string 类型 console.log ...