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 ...
随机推荐
- 实例化MD5CryptoServiceProvider报错:此实现不是 Windows 平台 FIPS 验证的加密算法的一部分
System.InvalidOperationException: This implementation is not part of the Windows Platform FIPS valid ...
- .Net Core与跨平台时区
由于开发者不熟悉不同操作系统管理时区的方式,当用.Net Core开发与时区相关的应用运行在不同操作系统上会出现错误.这片文章将会探索一下在不同操作系统上用.Net Core 使用时区信息出现的问题与 ...
- UWP开发---通过委托跨页面导航
-前言 做过.Net开发的都了解,当二级窗口操作主窗口的控件时通常用委托的方式.那么在UWP开发中,常常会遇到MainPage的二级Frame里面的内容去操作MainPage的导航跳转,具体看下图: ...
- 如何使用socket进行java网络编程(一)
笔者进来遇到一个项目,一家公司的系统需要在完成自身业务逻辑的同时,接入到某银行的核心系统(这里准确说应该是前置机)进行一系列的账务处理,然后再将账务处理结果返回给该公司系统. 网络通信采用TCP协议. ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- ES6字符串相关扩展
变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...
- Java抽象工厂模式
Java抽象工厂模式 基本定义 抽象工厂模式是所有形态的工厂模式中最为抽象和最其一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 ...
- Python shutil模块(目录和文件操作)
import shutil #导入shutil模块 copyfileobj方法 将类文件对象fsrc的内容复制到类文件对象fdst shutil.copyfileobj(fsrc, fdst[, le ...
- IP等级
IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,来源是国际电工委员会的标准IEC 60529,这个标准在2004年也被采用为美国国家标准. 在这个标 ...
- 配置文件备份方案(expect+shell)
需求描述:备份所有线上服务器squid.httpd.mysql.nginx的配置文件 环境:在公司内网采用expect+shell脚本模式,进行批量备份.expect脚本通过ssh登录服务器,从本地c ...