apicloud apicloud

注册
查看: 24098|回复: 82

[模块教程] UIAlbumBrowser 模块效果展示

 

管理员

UID:253705

主题:
53
帖子:
460
云币:
856

[模块教程] UIAlbumBrowser 模块效果展示

 
24098 82 | 发表于 2018-8-6 15:21:01 |阅读模式 | |
本帖最后由 uoaccw 于 2018-12-28 20:46 编辑

UIAlbumBrowser 是一个本地媒体资源扫描器,在 Android 平台上可扫描整个设备的资源,iOS 仅扫描相册内的资源。本模块仅支持对本地图片资源的浏览、读取,目前尚不支持编辑。注意本模块在iPhone设备上仅支持 iOS8.0 及以上版本。
模块文档地址:https://docs.apicloud.com/Client-API/UI-Layout/UIAlbumBrowser

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

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



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

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <style>
  9.         body {
  10.             padding-top: 60px;
  11.         }

  12.         .imgcontainter {
  13.             display: flex;
  14.             display: -webkit-flex;
  15.             /*display: -webkit-box;*/
  16.             flex-direction: row;
  17.             flex-wrap: wrap;
  18.             justify-content: space-around;
  19.             /*justify-content: center;*/
  20.             align-items: center;
  21.             /*align-content: stretch;*/
  22.             height: 100%;
  23.             padding: 5px;
  24.         }

  25.         .imgcontainter img {
  26.             flex: 1 1 auto;
  27.             -webkit-flex: 1 1 auto;
  28.             width: 145px;
  29.             height: 145px;
  30.             margin: 5px;
  31.         }

  32.         button {
  33.             margin: 10px;
  34.         }
  35.     </style>
  36. </head>

  37. <body>

  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.     function UIAlbumBrowser_imagePicker() {
  58.         UIAlbumBrowser.imagePicker({
  59.             max: 9,
  60.             styles: {
  61.                 bg: '#000000',
  62.                 //cameraImg: 'widget://res/cameraImg.png',
  63.                 mark: {
  64.                     position: 'top_right',
  65.                     size: 20
  66.                 },
  67.                 nav: {
  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.             animation: true,
  80.         }, function(ret) {
  81.             if (ret.eventType == 'nextStep') {
  82.                 if (ret.list && ret.list.length > 0) {
  83.                     imgarr = ret.list;
  84.                     UIAlbumBrowser_transPath();
  85.                 }
  86.                 UIAlbumBrowser.closePicker();
  87.                 //alert(JSON.stringify(ret));
  88.             }
  89.             if (ret.originalPath && ret.originalPath.length > 0) {
  90.                 document.getElementById('img').src = ret.originalPath;
  91.             }
  92.         });
  93.     }

  94.     function UIAlbumBrowser_open() {
  95.         UIAlbumBrowser.open({
  96.             max: 9,
  97.             type: 'all',
  98.             isOpenPreview: true,
  99.             styles: {
  100.                 bg: '#000000',
  101.                 mark: {
  102.                     position: 'bottom_left',
  103.                     size: 20
  104.                 },
  105.                 nav: {
  106.                     bg: '#000000',
  107.                     titleColor: '#ffffff',
  108.                     titleSize: 18,
  109.                     cancelColor: '#00ff00',
  110.                     cancelSize: 16,
  111.                     finishColor: '#00ff00',
  112.                     finishSize: 16
  113.                 }
  114.             },
  115.             rotation: false  //无效
  116.         }, function(ret) {
  117.             if (ret) {
  118.                 alert(JSON.stringify(ret));
  119.             }
  120.         });

  121.     }

  122.     function UIAlbumBrowser_transPath() {
  123.         UIAlbumBrowser.transPath({
  124.             path: imgarr[i].path
  125.         }, function(ret, err) {
  126.             if (ret) {
  127.                 i++;
  128.                 if (i < imgarr.length) {
  129.                     UIAlbumBrowser_transPath();
  130.                 } else {
  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.             } else {
  138.                 console.log(JSON.stringify(err));
  139.             }
  140.         });
  141.     }
  142. </script>

  143. </html>
复制代码




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
37
帖子:
165
云币:
220
发表于 2018-10-30 15:07:43 |
  1.   function UIAlbumBrowser_transPath() {
  2.         UIAlbumBrowser.transPath({
  3.             path: imgarr[i].path
  4.         }, function(ret, err) {
  5.             if (ret) {
  6.                 i++;
  7.                 if (i < imgarr.length) {
  8.                     UIAlbumBrowser_transPath();
  9.                 } else {
  10.                     i = 0;
  11.                 }
  12.                 var img = document.createElement('img');
  13.                 img.src = ret.path;
  14.                 document.getElementById('bd').appendChild(img);
  15.                 console.log("ret.path:" + ret.path);
  16.             } else {
  17.                 console.log(JSON.stringify(err));
  18.             }
  19.         });
  20.     }
复制代码


我在这一步里面。
img.src = ret.path;

ret.path赋值给img.src后,
我获取到img.src的值为


而不是dome中img.src的值file:///storage/emulated/0/Android/data/ta/com.q122446697.kyz/cache/compressCache/dc7cb2b6f324c51513b77e9e17ed9ceb.jpg

请问为什么img src会自动处理成http的,而不是file的呢?

主题:
73
帖子:
371
云币:
420
发表于 2019-3-25 15:40:37 |
点击下一步没反应。点取消有时可以获取到数据,有时又不行

驾校小白

UID:818863

主题:
1
帖子:
2
云币:
3
发表于 2019-9-17 21:32:35 |
本帖最后由 APIDog 于 2019-9-17 21:35 编辑
竹林小虾 发表于 2018-10-30 15:07
我在这一步里面。
img.src = ret.path;

同样的问题,请版主给技术指点。使用了示例的代码,调出图库,选取图片后,得到的图片地址没法预览到页面也就没法上传到服务端,看看网友游客或版主有什么方法解决的

主题:
10
帖子:
40
云币:
73
发表于 2019-5-31 16:15:07 |
打开之后点击下一步无法返回,但是点击取消却有数据返回

主题:
12
帖子:
50
云币:
70
发表于 2018-9-28 22:16:21 |
拍照以后,来不及选择,直接就退出了模块怎么破?
测试机型:荣耀v10

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
5
帖子:
8
云币:
20
发表于 2018-8-18 11:34:32 |
为什么下载运行这个包还是显示未绑定模块啊

主题:
2
帖子:
6
云币:
12
发表于 2018-8-18 13:51:54 |
请问都支持什么格式的文件?

主题:
359
帖子:
51463
云币:
21985
发表于 2018-8-20 18:02:02 |
大大大灰狼 发表于 2018-8-18 11:34
为什么下载运行这个包还是显示未绑定模块啊

需要添加模块,编译自定义loader
【奖金150万】“用友·华为云杯”第三届开发者大赛报名开启,APICloud开发者直接报名参加:点击报名

主题:
17
帖子:
63
云币:
68
发表于 2018-9-4 11:23:53 |
想问一下调取摄像头的时候总是会app崩溃怎么解决

主题:
359
帖子:
51463
云币:
21985
发表于 2018-9-4 14:23:49 |
俗人将庸 发表于 2018-9-4 11:23
想问一下调取摄像头的时候总是会app崩溃怎么解决

Android还是iOS?
iOS需要在云编译界面勾选相机、相册权限
【奖金150万】“用友·华为云杯”第三届开发者大赛报名开启,APICloud开发者直接报名参加:点击报名

驾校小白

UID:441805

主题:
2
帖子:
5
云币:
14
发表于 2018-9-10 17:01:05 |
为哈选择图片后页面上的图片不会显示?

入门司机

UID:567575

主题:
66
帖子:
384
云币:
478

APICloud粉丝装逼侠

发表于 2018-9-10 21:23:25 |
UIAlbumBrowser.imagePicker,第一次打开没问题,再次打开就关不上,因为没有回调所以将数据保存在本地后再调用
        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        UIAlbumBrowser.imagePicker({
            max: 5,
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_left',
                    size: 20
                },
                nav: {
                    bg: '#11d0d6',
                    titleColor: '#fff',
                    titleSize: 18,
                    cancelColor: '#eee',
                    cancelSize: 16,
                    finishColor: '#fff',
                    finishSize: 16
                }
            },
            animation: true
        }, function(ret) {
            if (ret) {
              $api.setStorage('temp', ret);
              UIAlbumBrowser.closePicker();
              // alert(JSON.stringify(ret))

            }
            console.log(JSON.stringify(ret));
        });

入门司机

UID:567575

主题:
66
帖子:
384
云币:
478

APICloud粉丝装逼侠

发表于 2018-9-10 21:26:08 |
安卓,ios编译后根本就打不开,用的自定义loader,ios没有用自定义测试,要换证书,有点麻烦

驾校小白

UID:676138

主题:
5
帖子:
17
云币:
56
发表于 2018-9-15 16:14:25 |
UIAlbumBrowser怎么修改状态的文字啊,例如完成这些改成英文
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表