Egret社区
UIAlbumBrowser是一个本地媒体资源扫描器,在Android平台上可扫描整个设备的资源,iOS仅扫描相册内部的资源。注意本模块在iPhone设备上仅支持iOS8.0及更高版本。
模块文档地址:
https : //docs.apicloud.com/Client-API/UI-Layout / UIAlbumBrowser

本例展示了常用的imagePicker()接口和open()接口。imagePicker()只能选择照片,可以点击相机按钮进行拍摄。open()接口可以选择照片或视频,有类型参数进行控制。
注意iOS上返回的路径需要使用transPath()接口进行处理。附件为小部件形式的代码包。

模块经常使用的场景,如从相册选择图片然后进行上传。
高级用法,用scan()和fetch()接口从相册获取指定数量的图片路径,然后通过帧自定义选择界面UI效果。

  1. <!DOCTYPE html>
  2. <html>

  3. <头>
  4.     <meta charset =“ utf-8”>
  5.     <meta name =“ viewport” content =“最大比例= 1.0,最小比例= 1.0,用户可缩放= 0,宽度=设备宽度,初始比例= 1.0” />
  6.     <title>标题</ title>
  7.     <link rel =“ stylesheet” type =“ text / css” href =“ ../ css / api.css” />
  8.     <样式>
  9.         身体 {
  10.             padding-top:60像素;
  11.         }

  12.         .imgcontainter {
  13.             显示:flex;
  14.             显示:-webkit-flex;
  15.             / *显示:-webkit-box; * /
  16.             flex-direction:行;
  17.             flex-wrap:包装;
  18.             证明内容:环绕;
  19.             / * justify-content:center; * /
  20.             align-items:居中;
  21.             / * align-content:拉伸; * /
  22.             高度:100%;
  23.             填充:5px;
  24.         }

  25.         .imgcontainter img {
  26.             flex:1 1自动;
  27.             -webkit-flex:1 1自动;
  28.             宽度:145像素;
  29.             高度:145px;
  30.             边距:5px;
  31.         }

  32.         按钮{
  33.             边距:10px;
  34.         }
  35.     </ style>
  36. </ head>

  37. <身体>

  38.     <img src =“” id =“ img” width ='300'>

  39.     <button tapmode type =“ button” onclick =“ UIAlbumBrowser_imagePicker()” name =“ button”> UIAlbumBrowser_imagePicker </ button>
  40.     <button tapmode type =“ button” onclick =“ UIAlbumBrowser_open()” name =“ button”> UIAlbumBrowser_open </ button>
  41.     <div id ='bd'class =“ imgcontainter”>
  42.         <!-<img src =“ ../ image / 10801920.png” alt =“”>
  43.         <img src =“ ../ image / 10801920.png” alt =“”>
  44.         <img src =“ ../ image / 10801920.png” alt =“”>
  45.         <img src =“ ../ image / 10801920.png” alt =“”>->
  46.     </ div>
  47. </ body>
  48. <script type =“ text / javascript” src =“ ../ script / api.js”> </ script>
  49. <script type =“ text / javascript”>
  50.     var UIAlbumBrowser;
  51.     var i = 0;
  52.     var imgarr = [];
  53.     apiready = function(){
  54.         UIAlbumBrowser = api.require('UIAlbumBrowser');
  55.     };

  56.     //打开图片选择器
  57.     函数UIAlbumBrowser_imagePicker(){
  58.         UIAlbumBrowser.imagePicker({
  59.             最多:9
  60.             样式:{
  61.                 bg:'#000000',
  62.                 // cameraImg:'widget://res/cameraImg.png',
  63.                 标记:{
  64.                     位置:“ top_right”,
  65.                     大小:20
  66.                 },
  67.                 导航:{
  68.                     bg:'#000000',
  69.                     cancelColor:'#fff',
  70.                     cancelSize:16
  71.                     nextStepColor:'#7fff00',
  72.                     nextStepSize:16
  73.                 },
  74.                 thumbnail:{//(可选项)返回的标题配置,**建议本图片不要设置过大**若已有的标签,则使用已有的替代。若要重新生成替换,可先调用清除缓存接口api.clearCache()。
  75.                     w:100,//(可选项)数字类型;返回的初始的宽;否则:原图的宽度
  76.                     h:100 //(可选项)数字类型;返回的初始的宽;否则:原图的高度
  77.                 }
  78.             },
  79.             动画:真实,
  80.         },函数(ret){
  81.             如果(ret.eventType =='nextStep'){
  82.                 如果(ret.list && ret.list.length> 0){
  83.                     imgarr = ret.list;
  84.                     UIAlbumBrowser_transPath();
  85.                 }
  86.                 UIAlbumBrowser.closePicker();
  87.                 //alert(JSON.stringify(ret));
  88.             }
  89.             如果(ret.originalPath && ret.originalPath.length> 0){
  90.                 document.getElementById('img')。src = ret.originalPath;
  91.             }
  92.         });
  93.     }

  94.     函数UIAlbumBrowser_open(){
  95.         UIAlbumBrowser.open({
  96.             最多:9
  97.             类型:“全部”,
  98.             isOpenPreview:是的,
  99.             样式:{
  100.                 bg:'#000000',
  101.                 标记:{
  102.                     位置:“ bottom_left”,
  103.                     大小:20
  104.                 },
  105.                 导航:{
  106.                     bg:'#000000',
  107.                     titleColor:'#ffffff',
  108.                     titleSize:18,
  109.                     cancelColor:'#00ff00',
  110.                     cancelSize:16
  111.                     finishColor:'#00ff00',
  112.                     尺寸:16
  113.                 }
  114.             },
  115.             rotation:false //无效
  116.         },函数(ret){
  117.             如果(ret){
  118.                 alert(JSON.stringify(ret));
  119.             }
  120.         });

  121.     }

  122.     函数UIAlbumBrowser_transPath(){
  123.         UIAlbumBrowser.transPath({
  124.             路径:imgarr [i] .path
  125.         },函数(ret,err){
  126.             如果(ret){
  127.                 i ++;
  128.                 如果(i <imgarr.length){
  129.                     UIAlbumBrowser_transPath();
  130.                 }其他{
  131.                     i = 0;
  132.                 }
  133.                 var img = document.createElement('img');
  134.                 img.src = ret.path;
  135.                 document.getElementById('bd')。appendChild(img);
  136.                 console.log(“ ret.path:” + ret.path);
  137.             }其他{
  138.                 console.log(JSON.stringify(err));
  139.             }
  140.         });
  141.     }
  142. </ script>

  143. </ html>
  144. 复制代码
复制代码


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部