静态页面和效果就拿微信的发朋友圈的界面来说吧,长按“相机”图标、或者点击“添加图片的+按钮”时假设触发的事件为addPic。
一、事件触发:addPic
/** *点击添加图片的图标时触发该事件,该事件用来弹出框让选择是从相册中添加数据还是拍照 * */ function addPic(){ //从底部弹出框让选择是通过相册拍照还是从相册中选择 api.actionSheet({ title: '添加图片', cancelTitle: '取消', //destructiveTitle: '红色警告按钮',//红色警示按钮标题,一般用于做一些删除之类操作 buttons: ['拍摄','从相册选择'] }, function(ret, err) { //ret.buttonIndex:1、拍摄 2、从相册选择 3、取消 if(ret.buttonIndex==3){//取消 return false; } if(ret.buttonIndex==1){//1-拍摄 getPictureByCamera(); }else{//从相册中选择 getPictureByAlbum(); } }); }
api.actionSheet()用来从底部弹出一个框,具体弹出内容可以通过buttons来设置,具体用法和操作可以参考APICloud的官网说明。(PS:这个方法很有用)
二、通过拍照来获取图片(也就是选择一张图片):
function getPictureByCamera(){ api.getPicture({ sourceType: "camera",//图片源类型,从相册、图片库或相机获取图片,可选项:camera/library/album 默认library encodingType: 'png',//返回图片类型,jpg或png,默认值png mediaValue: 'pic',//媒体类型,图片或视频,可选项:pic-图片 video-视频 all-图片和视频,Android不支持默认pic destinationType: 'url',//返回数据类型,指定返回图片地址或图片经过base64编码后的字符串,可选项:base64/url allowEdit: false,//是否可以选择图片后进行编辑,支持iOS及部分安卓手机,默认值false //quality: 50,//图片质量,只针对jpg格式图片(0-100整数) targetWidth: 100,//压缩后的图片宽度,图片会按比例适配此宽度,默认值:原图宽度 targetHeight: 100, saveToPhotoAlbum: false//拍照或录制视频后是否保存到相册,默认值false }, function(ret, err) { if (ret) { if(ret.data.length>0){//拍摄完成取消时,会返回该方法,但是ret.data为空 var img = "<a href='javascript:void(0);' class='add_pic' onclick='previewThePic(this);'><img src='"+ret.data+"' /></a>"; $("#picList").append(img);//将选择的图片显示出来 if($("#picList").children().length==maxImgCount){//达到显示总数了,那么+按钮隐藏 $("#addPicBtn").hide();//添加图片用的+按钮隐藏 } } } }); }
注:maxImgCount为发表一个朋友圈最多允许使用的图片数量,我这里是9张。
picList为显示图片的DIV。
addPicBtn为添加图片用的+按钮。
getPicture()方法主要用来用户单张图片,具体用法也可以参考官网。
三、从图册中选择多张图片:
这个需要用到一个模块UIMediaScanner,需要在模块库中找到并添加到项目中,然后云编译一下。
添加模块之后测试就不能再使用APICloud官方的APPLoader,因为它没有带我们自己添加的模块。这时候就需要自定义loader。也很简单,在APICloud studio(或者其他APICloud开发工具)中右键项目---->编译自定义loader,它就会自己编译,等编译完成后悔返回一个二维码,扫一扫下载自定义的loader并安装到手机,就可以使用添加的模块了。
注意:自定义的loader有效期为7天,7天过后需要再次编译。而且每次添加模块都要重新编译一下,添加代码不需要重新编译,WIFI同步就能看到效果的。
自定义loader先说到这里,接着说多图片选择。
/** *该方法用来弹出框选择图片 * * */ function getPictureByAlbum(){ //UIMediaScanner 是一个多媒体扫描器,可扫描系统的图片、视频等多媒体资源 var obj = api.require('UIMediaScanner'); var imgCount = 9;//默认选9张 //还能选择几张 imgCount = maxImgCount-$("#picList").children().length; //alert(imgCount+"\n"+(maxImgCount-imgCount)); obj.open({ //返回的资源种类,picture(图片),video(视频),all(图片和视频) type: 'picture', //(可选项)图片显示的列数,须大于1 column: 3, max: imgCount,//一次性最多选择几张图片,默认为一次最多选择5张。 //sort:(可选项)图片排序方式,asc(旧->新),desc(新->旧) sort: { key: 'time',//按照图片创建时间从新到旧排序 order: 'desc' }, //(可选项)模块各部分的文字内容 texts: { stateText: '已选择*项', cancelText: '取消', finishText: '完成' }, styles: { bg: '#fff', mark: { icon: '', //position: 'bottom_right', position:'top_right', size: 20 }, nav: { bg: '#eee', stateColor: '#000', stateSize: 18, cancleBg: 'rgba(0,0,0,0)', cancelColor: '#000', cancelSize: 18, finishBg: 'rgba(0,0,0,0)', finishColor: '#000', finishSize: 18 } }, exchange:true,//是否交换‘确定’和‘取消’按钮的位置(默认‘取消’按钮在右边,‘确定’按钮在左边),默认值false showPreview:true,//是否支持返回预览事件 //是否支持打开已选图片预览效果,默认为false。当本参数为 true 时,styles-》mark-》position 参数恒为 top_right,切此时模块会为 mark 提供一个未选中时的图标。 showBrowser:true }, function(ret) { // 获取图片数据并处理 if (ret) { //判断点击的是不是cancel和preview,若是那么不处理 //preview模式下,有取消和完成两个按钮,点击取消时会自动跳转到选择图片的界面,点击完成按钮时会提交ajax,也就是会回调到该处 //且会触发至少两次,一次为confirm,其他次数为preview,只处理为confirm的情况 if(ret.eventType=="cancel" || ret.eventType=="preview"){ return false; } for(var i=0;i<ret.list.length;i++){ //alert(ret.list[i].path); //alert(JSON.stringify(ret.list[i])); var img = "<a href='javascript:void(0);' class='add_pic' onclick='previewThePic(this);'><img src='"+ret.list[i].path+"' /></a>"; $("#picList").append(img);//将选择的图片显示出来 } if($("#picList").children().length==maxImgCount){//达到显示总数了,那么+按钮隐藏 $("#addPicBtn").hide(); } } }
注意点:在测试的时候,发现UIMediaScanner有一个问题:它会扫描出不存在的照片,如第一次扫描的时候扫描出A.png,后台把A.png删除再扫描,还是会扫描出A.png。清除UIMediaScanner的缓存、APP的缓存、甚至于卸载了APP还是会扫描出A.png,也不知道这是什么问题。
选择图片就写到这里,祝好运!
相关推荐
5. **清晰度选择**:根据网络状况自动或手动切换视频清晰度,提升观看体验。 6. **广告插播**:支持在视频播放前后插入广告,帮助开发者实现商业化。 7. **播放历史记录**:保存用户的播放记录,方便用户继续观看。 ...
### APICloud教程:服务器上的页面执行API #### 背景介绍 APICloud作为一款混合开发平台,为开发者提供了高效便捷的应用开发方案。它不仅支持原生接口的调用,还允许开发者通过HTML5、JavaScript等前端技术进行...
APICloud是一个强大的移动应用开发平台,它允许开发者使用JavaScript进行跨平台的原生应用开发。WebStorm是一款由JetBrains公司推出的高效JavaScript IDE,专为前端开发者设计,提供了丰富的代码提示、调试、版本...
### APICloud:轻松6步完成App软件开发 随着移动互联网的发展,应用程序(App)已成为人们生活中不可或缺的一部分。然而,对于那些不具备编程技能的人来说,开发一款App似乎是一项难以企及的任务。幸运的是,APICloud...
在H5页面中,我们可以使用`apicloud.file.chooseImage`方法来唤起系统相册或相机让用户选择图片。这个方法接受一个参数对象,包含以下选项: - count:可选图片数量,默认9。 - sizeType:图片类型,可选原图('...
在Apicloud开发过程中,经常会遇到需要实现省市区三级联动的功能,这在移动应用中尤其常见,例如用户填写地址时的选择。本知识点将详细讲解如何利用Apicloud的UIActionSelector模块来实现这一功能,以及如何处理和...
- **操作说明**:在“我的APP项目视图”中选择一个应用,右键选择“一键真机同步测试”或通过APICloud IDE中的按钮来实现。 ##### 7. 运行PC模拟器 - **说明**:PC模拟器可以帮助开发者在本地模拟应用运行情况,...
这个名为"apicloud模块权限.zip"的压缩包显然包含了与APICloud相关的代码和资源,用于获取和管理在Android和iOS平台上所需的特定模块权限。以下是对这些知识点的详细解释: 1. **APICloud**:APICloud 是一套完整的...
而APICloud提供的"一站式开发"平台,通过模块化和功能实现的理念,使开发者能够按需选择布局功能,简化了开发流程,提高了开发效率。 在数据安全方面,APICloud采用了七牛云的存储服务,确保了数据的真实性和安全性...
APICloud 为 Atom 编辑器推出的开发工具包。包含新建应用模板,页面模板,WiFi 真机同步,流式日志输出...在顶部菜单 Packages/APICloud 或右击工程文件或目录,即可使用相关APICloud开发功能; 标签:APICloud
然而,对于新手来说,选择APICloud并不是一件容易的事情。这篇文章旨在分享学习APICloud的经验和感悟,希望能够帮助新手更好地学习和使用APICloud。 首先,APICloud的学习需要从基础开始。开发者需要了解APICloud的...
图片批量上传基于apicloud h5的图片上传,解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px,由于原作者删掉博文,放着备份,也方便大家,如果有影响到原作者,烦请私聊我删资源。
APICloud 提供的一款适用于终端/命令行的 APICloud 平台开发工具,基于 apicloud-tools-core 核心开发库 开发,包含新建页面模板,新建应用模板,WiFi同步等核心功能等核心库已有功能。操作系统: Mac/Windows/...
使用`apicloud build <platform>`命令来构建项目,其中`<platform>`代表目标平台,如`ios`或`android`。这一步会编译代码并生成对应平台的应用包。 6. **真机预览** 在完成构建后,可以使用`apicloud preview`...
APICloud-polyfill脚手架是为开发者提供的一种高效、便捷的开发工具,它主要针对APICloud平台,用于解决在不同浏览器或低版本环境下,API不兼容的问题。APICloud是一个移动应用开发平台,它允许开发者使用JavaScript...
为了提高应用性能,需要注意减少网络请求、优化图片资源、合理使用内存和CPU,以及利用APICloud的性能监控工具进行调优。 12. **持续集成与部署**: APICloud提供了CI/CD(持续集成/持续部署)服务,可以自动化...
总的来说,APICloud的UICalendar是一个强大而灵活的日期选择组件,对于任何需要处理日期输入的APICloud应用来说,都是不可或缺的一部分。通过深入理解和实践"APICloud 日期控件UICalendarDemo",开发者能够熟练掌握...
同时,需要注意的是,为了提供良好的用户体验,通常会添加一些动画效果或进度提示,这可以通过CSS3动画或APICloud的动画模块`api.animate`来实现。 最后,`hammer.js`是一个流行的触摸库,它可以扩展APICloud的触控...
- 首先,进入 APIcloud 控制台,找到左侧的“云设置”,选择一个存储服务并开通。 - 在“Database”中,你会看到默认的一些表格,如 `accessToken`、`file`、`role`、`roleMapping` 和 `user` 等。开发者可以根据...