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. 实例化MD5CryptoServiceProvider报错:此实现不是 Windows 平台 FIPS 验证的加密算法的一部分

    System.InvalidOperationException: This implementation is not part of the Windows Platform FIPS valid ...

  2. .Net Core与跨平台时区

    由于开发者不熟悉不同操作系统管理时区的方式,当用.Net Core开发与时区相关的应用运行在不同操作系统上会出现错误.这片文章将会探索一下在不同操作系统上用.Net Core 使用时区信息出现的问题与 ...

  3. UWP开发---通过委托跨页面导航

    -前言 做过.Net开发的都了解,当二级窗口操作主窗口的控件时通常用委托的方式.那么在UWP开发中,常常会遇到MainPage的二级Frame里面的内容去操作MainPage的导航跳转,具体看下图: ...

  4. 如何使用socket进行java网络编程(一)

    笔者进来遇到一个项目,一家公司的系统需要在完成自身业务逻辑的同时,接入到某银行的核心系统(这里准确说应该是前置机)进行一系列的账务处理,然后再将账务处理结果返回给该公司系统. 网络通信采用TCP协议. ...

  5. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  6. ES6字符串相关扩展

    变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...

  7. Java抽象工厂模式

    Java抽象工厂模式 基本定义 抽象工厂模式是所有形态的工厂模式中最为抽象和最其一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 ...

  8. Python shutil模块(目录和文件操作)

    import shutil #导入shutil模块 copyfileobj方法 将类文件对象fsrc的内容复制到类文件对象fdst shutil.copyfileobj(fsrc, fdst[, le ...

  9. IP等级

    IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,来源是国际电工委员会的标准IEC 60529,这个标准在2004年也被采用为美国国家标准.  在这个标 ...

  10. 配置文件备份方案(expect+shell)

    需求描述:备份所有线上服务器squid.httpd.mysql.nginx的配置文件 环境:在公司内网采用expect+shell脚本模式,进行批量备份.expect脚本通过ssh登录服务器,从本地c ...