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>
複製代碼