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>
复制代码
原文地址:https://blog.51cto.com/9334358/2480446
时间: 2024-09-30 11:21:57