APICloud開發者進階之路|[ 模塊教程 ] UIAlbumBrowser模塊效果展現

時間 2020-03-21

標籤 apicloud 開發者進階之路模塊教程 uialbumbrowser 效果展現欄目職業生涯简体版

原文原文鏈接

UIAlbumBrowser是一個本地媒體資源掃描器，在Android平臺上可掃描整個設備的資源，iOS僅掃描相冊內部的資源。注意本模塊在iPhone設備上僅支持iOS8.0及更高版本。
模塊文檔地址：https : //docs.apicloud.com/Client-API/UI-Layout / UIAlbumBrowserjavascript

本例展現了經常使用的imagePicker（）接口和open（）接口。imagePicker（）只能選擇照片，能夠點擊相機按鈕進行拍攝。open（）接口能夠選擇照片或視頻，有類型參數進行控制。
注意iOS上返回的路徑須要使用transPath（）接口進行處理。附件爲小部件形式的代碼包。css

模塊常用的場景，如從相冊選擇圖片而後進行上傳。
高級用法，用scan（）和fetch（）接口從相冊獲取指定數量的圖片路徑，而後經過幀自定義選擇界面UI效果。html

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