apicloud 预览图片_APICloud(三):预览图片
上一篇说的选择图片,且显示图片的img标签的父级A标签每个都添加了onclick事件previewThePic,该事件用来预览图片。且所有的A标签都添加在picList的div中。(PS:先说好层级关系,代码中获取img的src就不会晕了)
对于图片预览,ac官方提供了两个模块:imageBrowser和photoBrowser。
imageBrowser:可预览,顶部有导航条(可返回、可保存到本地),唯一的缺点:不能删除图片且自定义的地方比较少
photoBrowser:可预览,顶部没有有导航条,双击可放大,不能返回,不能保存图片,需要根据事件自定义图片
权衡了两个模块的功能,最后选择的photoBrowser。
imageBrowser的使用也在这里粘一下,大家可以直接复制先看看效果。当然也可以直接参考官网的例子
/**
*该方法用来预览图片-使用imageBrowser,可预览,顶部有导航条(可返回、可保存到本地),唯一的缺点:不能删除图片
* @param obj:A标签,主要用来获取当前A标签的下标用来当先显示点击的图片
* **/
function previewThePicByimageBrowser(obj){
//1、获取图片数组
var picArray = new Array();
$("#picList").children().each(function(i){
picArray[i]=this.children[0].src;
});
//alert(picArray);
//2、获取当前图片的index
var index = $(obj).index();
//alert("当前图片的下标:"+index);
//3、引入模块,进行预览
var imageBrowser = api.require('imageBrowser');
imageBrowser.openImages({
imageUrls:picArray,//图片的URL组成的数组
showList:false,//是否以九宫格方式显示图片,默认值:true(效果:点击某个图片后,先以九宫形式显示所有图片,然后单击哪张显示哪张)
activeIndex:index,//当不用九宫格方式显示时,当前要显示的图片在集合中的索引
tapClose:false//当showList为false时,本参数有效。若本参数为true,则不显示顶部导航条,且单击图片时退出本模块。若本参数为false,则显示顶部导航条,且单击图片隐藏/显示顶部导航条
});
}
因为最后选择的 photoBrowser,所以添加了删除图片和将图片保存到手机的功能。
/**
*该方法用来预览图片-使用photoBrowser,可预览,顶部没有有导航条,双击可放大,不能返回,不能保存图片,需要根据事件自定义图片
* (网上搜的导航栏的解决办法:自己open个frame贴上去就行了;模块开了个fream,然后我在开个fream透明的写在他上面么?
回调里调用 openFrame,效果在Frame上写)
* @param obj:A标签,主要用来获取当前A标签的下标用来当先显示点击的图片
* **/
function previewThePic(obj){
//previewThePicByimageBrowser(obj);
//1、获取图片数组
var picArray = new Array();
$("#picList").children().each(function(i){
picArray[i]=this.children[0].src;
});
//alert(picArray);
var imgCount = picArray.length;//获取图片总张数
//alert(picArray);
//2、获取当前图片的index
var index = $(obj).index();
//alert("使用photoBrowser进行图片预览");
//3、引入模块,进行预览
var photoBrowser = api.require('photoBrowser');
photoBrowser.open({
images: picArray,//图片的URL组成的数组
activeIndex:index,//当前要显示的图片在图片路径数组中的索引
//placeholderImg: 'widget://launch/wmltapp.png',//当加载网络图片时显示的占位图路径,要求本地图片路径(widget://、fs://)
bgColor: '#000',//背景色
zoomEnabled:true//是否打开缩放手势识别功能(随手势放大缩小图片)
}, function(ret, err) {
if (ret) {
var eveType = ret.eventType;
var imgIndex = ret.index;//当前图片的下标
photoBrowser.clearCache();//清除缓存
switch(eveType){
case "show":break;//打开浏览器并显示,以后做导航用(openFrame)
case "change":{//切换图片的时候,不处理
/*
photoBrowser.getImage({
index: imgIndex
}, function(ret33, err33) {
alert(ret33.path);
});
*/
break;
}
case "click":{//单击图片浏览器,用来关闭图片浏览器
photoBrowser.close();
break;
}
case "longPress":{//长按,弹出框,让选择是保存还是删除
api.actionSheet({
cancelTitle: '取消',
destructiveTitle: '删除',//红色警示按钮标题,一般用于做一些删除之类操作
buttons: ['保存到手机']
}, function(ret2, err2) {
//ret.buttonIndex:1、删除 2、保存到手机 3、取消
switch(ret2.buttonIndex){
case 1:{//删除
//先删除在预览图片集合中的图片
photoBrowser.deleteImage({
index:imgIndex
});
imgCount = imgCount-1;
//2、删除页面中对应的a标签
//alert($("#picList>a:eq("+imgIndex+")").length);
$("#picList>a:eq("+imgIndex+")").remove();
//3、判断当前图片集合中是否还有可以预览的图片,若是没有,关闭当前图片浏览器
if(imgCount<=0){//说明删完了
validateBtn();//修改保存按钮的状态
photoBrowser.close();
}
break;
}
case 2:{//保存到手机
//先获取图片路径:
photoBrowser.getImage({
index: ret.index
}, function(ret3, err3) {
if (ret3) {
//alert("图片路径:"+ret3.path);
//然后通过路径保存到手机
api.saveMediaToAlbum({
path: ret3.path
},function(ret4,err){
if (ret4 && ret4.status) {
//alert('保存成功');
//最后弹出保存成功与否
api.toast({
msg:'保存成功',
duration: 2000,//默认为2000,即2s
location: 'middle'//可选值:top、middle、bottom,默认为bottom
});
} else {
alert('保存失败');
}
});
} else {
alert("获取图片路径失败");
}
});
break;
}
}
});
break;
}
}
} else {
alert(JSON.stringify(err));
}
});
}
图片预览还是很简单的,只要页面上都使用这种结构,哪里都能调用啦!
最后,祝好运!
apicloud 预览图片_APICloud(三):预览图片相关推荐
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- 搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)...
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...
- Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
- Camera2 三预览
1 获取预览尺寸 CameraCharacteristics 是一个只读的相机信息提供者,其内部携带大量的相机信息,包括代表相机朝向的 LENS_FACING:判断闪光灯是否可用的 FLASH_INF ...
- java图片的在线预览_【Java】web实现图片在线预览
一.场景还原 用户上传了一张图片,已有服务器保存路径,现由于系统配置无法直接通过图片URL打开预览图片,需实现点击预览将图片显示在浏览器上. 二.实现方法 html: 预览 此处用预览按钮方法实现 J ...
- Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览,2.拖动,3.放大,4.左右滑动,5.长按保存到手机)的功能
一.测试 实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...
- 原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面"相册"?或者说,传统网页中怎么实现图片预览功能? 如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了 ...
- XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析 套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
- 微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
最新文章
- 桌面虚拟化XenDesktop常见故障排查宝典
- redis添加认证密码
- 通过pipeline实现jenkins的ci/cd功能
- POJ1722二维spfa+优先队列优化
- jquery实现页面加载时删除特定class 的div内前三个字符
- xamarin ios html5 video.js 无法播放
- Eclipse 工作空间(Workspace)---Eclipse教程第07课
- 整型变量 默认输出 java_java数据类型详解
- 电脑怎么打字切换中文_五个练习打字的网站,让你的速度飞起
- UVA10213 How Many Pieces of Land【数学+大数】
- 多生产者_【并发那些事】生产者消费者问题
- Log4Net 之走进Log4Net (四)
- go——垃圾回收机制(GC)
- 激流之傲服务器维修,国服3月15日部分服务器预计维护16小时
- 使用hex编码绕过主机卫士IIS版本继续注入
- 生信笔记:序列同源性、相似性
- 史上最全:Jetbrains全家桶31款软件 分类+功能整理收集
- 线性代数中的线性方程组
- Dart语言中的Isolate
- 可以测试成果的背单词软件,实测背单词最好的软件排名,选了4款最管用的单词软件送给你!...
热门文章
- 什么是IPX/SPX
- 嵌入式硬件基础知识汇总<附带与硬件密切相关的软件介绍>
- Unity打包apk报错: Cannot fit requested classes in a single dex file (# methods: 73376 > 65536)的解决办法
- 大数据时代对存储发展的要求有哪些
- 量化高频交易从0到1(期货CTP,纳秒级,高频、趋势及套利策略)课程大纲
- 怎么比较两个字符串的大小?
- 记一次失败的实战渗透
- Spring容器框架
- vue3 ref 和 reactive 区别
- 大数加法(测试数据不完全,可能会有出错个例)