APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示
UIAlbumBrowser是一个本地媒体资源扫描器,在Android平台上可扫描整个设备的资源,iOS仅扫描相册内部的资源。注意本模块在iPhone设备上仅支持iOS8.0及更高版本。
模块文档地址:https://docs.apicloud.com/Client-API/UI-Layout/UIAlbumBrowser
本例展示了常用的imagePicker()接口和open()接口。imagePicker()只能选择照片,可以点击相机按钮进行拍摄。open()接口可以选择照片或视频,有类型参数进行控制。
注意iOS上返回的路径需要使用transPath()接口进行处理。附件为小部件形式的代码包。
模块经常使用的场景,如从相册选择图片然后进行上传。
高级用法,用scan()和fetch()接口从相册获取指定数量的图片路径,然后通过帧自定义选择界面UI效果。
<!DOCTYPE html> <html> <头> <meta charset =“ utf-8”> <meta name =“ viewport” content =“最大比例= 1.0,最小比例= 1.0,用户可缩放= 0,宽度=设备宽度,初始比例= 1.0” /> <title>标题</ title> <link rel =“ stylesheet” type =“ text / css” href =“ ../ css / api.css” /> <样式> 身体 { padding-top:60像素; } .imgcontainter { 显示:flex; 显示:-webkit-flex; / *显示:-webkit-box; * / flex-direction:行; flex-wrap:包装; 证明内容:环绕; / * justify-content:center; * / align-items:居中; / * align-content:拉伸; * / 高度:100%; 填充:5px; } .imgcontainter img { flex:1 1自动; -webkit-flex:1 1自动; 宽度:145像素; 高度:145px; 边距:5px; } 按钮{ 边距:10px; } </ style> </ head> <身体> <img src =“” id =“ img” width ='300'> <button tapmode type =“ button” onclick =“ UIAlbumBrowser_imagePicker()” name =“ button”> UIAlbumBrowser_imagePicker </ button> <button tapmode type =“ button” onclick =“ UIAlbumBrowser_open()” name =“ button”> UIAlbumBrowser_open </ button> <div id ='bd'class =“ imgcontainter”> <!-<img src =“ ../ image / 10801920.png” alt =“”> <img src =“ ../ image / 10801920.png” alt =“”> <img src =“ ../ image / 10801920.png” alt =“”> <img src =“ ../ image / 10801920.png” alt =“”>-> </ div> </ body> <script type =“ text / javascript” src =“ ../ script / api.js”> </ script> <script type =“ text / javascript”> var UIAlbumBrowser; var i = 0; var imgarr = []; apiready = function(){ UIAlbumBrowser = api.require('UIAlbumBrowser'); }; //打开图片选择器 函数UIAlbumBrowser_imagePicker(){ UIAlbumBrowser.imagePicker({ 最多:9 样式:{ bg:'#000000', // cameraImg:'widget://res/cameraImg.png', 标记:{ 位置:“ top_right”, 大小:20 }, 导航:{ bg:'#000000', cancelColor:'#fff', cancelSize:16 nextStepColor:'#7fff00', nextStepSize:16 }, thumbnail:{//(可选项)返回的标题配置,**建议本图片不要设置过大**若已有的标签,则使用已有的替代。若要重新生成替换,可先调用清除缓存接口api.clearCache()。 w:100,//(可选项)数字类型;返回的初始的宽;否则:原图的宽度 h:100 //(可选项)数字类型;返回的初始的宽;否则:原图的高度 } }, 动画:真实, },函数(ret){ 如果(ret.eventType =='nextStep'){ 如果(ret.list && ret.list.length> 0){ imgarr = ret.list; UIAlbumBrowser_transPath(); } UIAlbumBrowser.closePicker(); //alert(JSON.stringify(ret)); } 如果(ret.originalPath && ret.originalPath.length> 0){ document.getElementById('img')。src = ret.originalPath; } }); } 函数UIAlbumBrowser_open(){ UIAlbumBrowser.open({ 最多:9 类型:“全部”, isOpenPreview:是的, 样式:{ bg:'#000000', 标记:{ 位置:“ bottom_left”, 大小:20 }, 导航:{ bg:'#000000', titleColor:'#ffffff', titleSize:18, cancelColor:'#00ff00', cancelSize:16 finishColor:'#00ff00', 尺寸:16 } }, rotation:false //无效 },函数(ret){ 如果(ret){ alert(JSON.stringify(ret)); } }); } 函数UIAlbumBrowser_transPath(){ UIAlbumBrowser.transPath({ 路径:imgarr [i] .path },函数(ret,err){ 如果(ret){ i ++; 如果(i <imgarr.length){ UIAlbumBrowser_transPath(); }其他{ i = 0; } var img = document.createElement('img'); img.src = ret.path; document.getElementById('bd')。appendChild(img); console.log(“ ret.path:” + ret.path); }其他{ console.log(JSON.stringify(err)); } }); } </ script> </ html> 复制代码