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模块效果展示

相关推荐