UIAlbumBrowser 模块效果展示

uoaccw

本帖最后由 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效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
padding-top: 60px;
}
.imgcontainter {
display: flex;
display: -webkit-flex;
/*display: -webkit-box;*/
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
/*justify-content: center;*/
align-items: center;
/*align-content: stretch;*/
height: 100%;
padding: 5px;
}
.imgcontainter img {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
width: 145px;
height: 145px;
margin: 5px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<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');
};
//打开图片选择器
function UIAlbumBrowser_imagePicker() {
UIAlbumBrowser.imagePicker({
max: 9,
styles: {
bg: '#000000',
//cameraImg: 'widget://res/cameraImg.png',
mark: {
position: 'top_right',
size: 20
},
nav: {
bg: '#000000',
cancelColor: '#fff',
cancelSize: 16,
nextStepColor: '#7fff00',
nextStepSize: 16
},
thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。
w: 100, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
h: 100 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
}
},
animation: true,
}, function(ret) {
if (ret.eventType == 'nextStep') {
if (ret.list && ret.list.length > 0) {
imgarr = ret.list;
UIAlbumBrowser_transPath();
}
UIAlbumBrowser.closePicker();
//alert(JSON.stringify(ret));
}
if (ret.originalPath && ret.originalPath.length > 0) {
document.getElementById('img').src = ret.originalPath;
}
});
}
function UIAlbumBrowser_open() {
UIAlbumBrowser.open({
max: 9,
type: 'all',
isOpenPreview: true,
styles: {
bg: '#000000',
mark: {
position: 'bottom_left',
size: 20
},
nav: {
bg: '#000000',
titleColor: '#ffffff',
titleSize: 18,
cancelColor: '#00ff00',
cancelSize: 16,
finishColor: '#00ff00',
finishSize: 16
}
},
rotation: false //无效
}, function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
}
function UIAlbumBrowser_transPath() {
UIAlbumBrowser.transPath({
path: imgarr[i].path
}, function(ret, err) {
if (ret) {
i++;
if (i < imgarr.length) {
UIAlbumBrowser_transPath();
} else {
i = 0;
}
var img = document.createElement('img');
img.src = ret.path;
document.getElementById('bd').appendChild(img);
console.log("ret.path:" + ret.path);
} else {
console.log(JSON.stringify(err));
}
});
}
</script>
</html>

复制代码

竹林小虾 · 回复于2018-10-30 15:07:43

function UIAlbumBrowser_transPath() {
UIAlbumBrowser.transPath({
path: imgarr[i].path
}, function(ret, err) {
if (ret) {
i++;
if (i < imgarr.length) {
UIAlbumBrowser_transPath();
} else {
i = 0;
}
var img = document.createElement('img');
img.src = ret.path;
document.getElementById('bd').appendChild(img);
console.log("ret.path:" + ret.path);
} else {
console.log(JSON.stringify(err));
}
});
}

复制代码

我在这一步里面。
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的呢？

中国石头

点击下一步没反应。点取消有时可以获取到数据，有时又不行

APIDog

本帖最后由 APIDog 于 2019-9-17 21:35 编辑

竹林小虾发表于 2018-10-30 15:07
我在这一步里面。
img.src = ret.path;

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

安安安安卓

打开之后点击下一步无法返回，但是点击取消却有数据返回

清腾子道

拍照以后，来不及选择，直接就退出了模块怎么破？
测试机型：荣耀v10

大大大灰狼

为什么下载运行这个包还是显示未绑定模块啊

我的阿拉蕾呢

请问都支持什么格式的文件？

技术咨询-F

大大大灰狼发表于 2018-8-18 11:34
为什么下载运行这个包还是显示未绑定模块啊

需要添加模块，编译自定义loader

俗人将庸

想问一下调取摄像头的时候总是会app崩溃怎么解决

技术咨询-F

俗人将庸发表于 2018-9-4 11:23
想问一下调取摄像头的时候总是会app崩溃怎么解决

Android还是iOS？
iOS需要在云编译界面勾选相机、相册权限

raoyf

为哈选择图片后页面上的图片不会显示？

云空却

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));
      });

云空却

安卓，ios编译后根本就打不开，用的自定义loader，ios没有用自定义测试，要换证书，有点麻烦

aminli

UIAlbumBrowser怎么修改状态的文字啊，例如完成这些改成英文