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

APICloud开发者进阶之路| H5Callmap 模块使用 demo

APICloud开发者进阶之路 |纯手工编写日程表功能

APICloud开发者进阶之路 | 超级实用技巧