为了账号安全,请及时绑定邮箱和手机立即绑定

Ionic2 Native组件学习之ImagePicker

标签:
AngularJS
Inoic2 Native 之Image Picker

Ionic的常用组件学习好之后,要学习一些Native Component了,这些组件都是通过PhoneCap的Cordova来访问原生的设备功能的。

要想使用Image Picker,首先就要安装Image Picker组件
使用以下命令安装Image Picker

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

更多关于Image Picker访问Github:[地址]( https://github.com/wymsee/cordova-imagePicker)

基本用法

首先在头部导入ImagePicker:

import { ImagePicker } from 'ionic-native';

该组件有以下三个方法:

  • getPictures(options) :顾名思义,就是选取照片
  • hasReadPermission() : 判断是否有读取权限 (android用)
  • requestReadPermission() : 请求读取权限 (android用)
getPictures详解

Promise和箭头函数的写法:

ImagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, (err) => { });

该方法的options属性如下:

  • maximumImagesCount (number) :一次能选择的最大数量的图片
  • width (number) 图片被允许的最大的宽度
  • height (number) 图片被允许的最大的高度
  • quality (number) 图片质量,默认是100

注:maximumImagesCount实际测试ios不起作用,具体什么问题还要再研究

示例

在前台html页面中:

<ion-row>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{userInfo.Url}}" (click)="uploadPic()" />
</ion-row>

ts文件中:

uploadPic(){
var opt = {
maxImagesCount:1,
width:100,
height:100,
quality:50
};
ImagePicker.getPictures(opt).then((results)=>{
for (var i = 0; i < results.length; i++) {
this.userInfo.Url = results[i];
}
},
(err)=>{

});
}

效果就是点击图片跳转到系统相册中,选中之后更新图片
图片描述

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
105
获赞与收藏
597

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消