APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
复制代码以上是关于APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示的主要内容，如果未能解决你的问题，请参考以下文章
APICloud开发者进阶之路|[ 模块教程 ] touping模块demo示例
APICloud开发者进阶之路 |audioRecorder录音模块Demo
APICloud开发者进阶之路 | UIPickerView 模块示例demo