上一篇说的选择图片,且显示图片的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)); } }); }
图片预览还是很简单的,只要页面上都使用这种结构,哪里都能调用啦!
最后,祝好运!
相关推荐
三、图片选择 在H5页面中,我们可以使用`apicloud.file.chooseImage`方法来唤起系统相册或相机让用户选择图片。这个方法接受一个参数对象,包含以下选项: - count:可选图片数量,默认9。 - sizeType:图片类型,可...
4. 快速迭代:开发过程中,可以实时预览效果,无需频繁打包安装,提高开发效率。 5. 自定义模块:APICloudSDK允许开发者自定义模块,扩展其功能,满足个性化需求。 二、APICloudSDK模块开发流程 1. 定义模块:首先...
开发者通常会使用APICloud Studio,这是一个集成开发环境(IDE),提供了代码编辑、调试、预览和打包等功能,极大地提高了开发效率。在这个过程中,开发者需要掌握JavaScript基础,因为APICloud主要基于HTML5、CSS3...
你可以使用APICloud Studio将源代码打包成`.wgt`文件,然后上传到APICloud服务器进行预览或发布。 `feature`目录可能包含了应用声明的特定功能或插件,比如推送通知、地图服务等。在这个登录注册实例中,可能需要...
5. **资源管理**:编辑器提供了方便的资源管理功能,包括图片、音频、视频等,方便开发者集中管理和使用。 6. **项目模板**:内置多种项目模板,让开发者能够快速启动新项目,缩短开发周期。 值得注意的是,虽然...
6. **用户体验优化**:为了让用户有更好的分享体验,开发者可能会添加预览功能,让用户在分享前能看到内容的呈现效果。此外,合理的界面布局和流程设计也是提高用户满意度的关键。 7. **调试与测试**:在开发过程中...
2. **资源管理**:内置资源管理器允许用户方便地管理和组织项目中的图片、音频、视频等资源。 3. **实时预览**:开发者可以实时查看代码修改后的效果,无需频繁编译运行。 4. **多平台支持**:APICloud Studio 3支持...
资源管理器则允许开发者轻松管理项目的文件和资源,如图片、音频、样式表等。项目管理功能使得创建、导入和组织多个项目变得简单。内置的模拟器可以实时预览应用效果,而调试器则有助于定位和修复代码中的错误。 ...
AppLoader是APICloud官方推出的一款工具,它的主要功能是通过WiFi连接真机设备,使得开发者可以在手机或平板电脑上实时预览和调试基于APICloud开发的应用程序。这一特性极大地提高了开发效率,尤其是在进行界面设计...
这个容器可以是任何形式,如警告框、对话框或图片预览等。 实现遮罩层特效的JavaScript基础包括DOM操作、事件监听和CSS样式修改。以下是一些关键步骤: 1. **DOM操作**:JavaScript通过Document Object Model (DOM...
(此图片来源于网络,如有侵权,请联系删除! ) 填坑指南: (此图片来源于网络,如有侵权,请联系删除! ) 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习...