MUI使用H5+Api調取系統相冊多圖選擇及轉base64碼

時間 2019-12-05

標籤 mui 使用 h5+api api 系統相冊選擇 base64 base 简体版

原文原文鏈接

偉大的哲學家曾說過
「寫代碼，必定要翻文檔」javascript

此次咱們須要用到的是調取系統相冊進行多圖上傳，
先奉上html5+api關於系統相冊的文檔連接
連接:HTML5+ API Reference & gallerycss

首先一點，咱們在使用5+Api前都須要在manifest.json文件中進行功能模塊的添加，
固然用Hbuilder的話大部分模塊都已在內，這裏是關於相冊的模塊html

{
// ...
"permissions":{
    // ...
    "Gallery": {
        "description": "系統相冊"
    }
}
}

另外，5+Api需在plusReady事件以後html5

//mui封裝的方法
mui.plusReady(function(){
    // ...
});
//5+寫法
document.addEventListener( "plusready", function(){
    // ...
}, false );

進入正題，多圖上傳的核心代碼爲如下代碼
咱們能夠設置多種參數，請查閱文檔java

// 從相冊中選擇圖片 
function galleryImg() {
    // 從相冊中選擇圖片
    console.log("從相冊中選擇圖片:");
    plus.gallery.pick( function(path){
        console.log(path);
    }, function ( e ) {
        console.log( "取消選擇圖片" );
    }, {filter:"image"} );
}

如下是多圖上傳的demo
請在包含配置文件和mui css及js項目中打開
iOS模擬器調試會閃退，真機不會，具體緣由未知web

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style type="text/css">
            .mui-bar{
                height: 64px;
                padding-top: 20px;
            }
            .mui-content{
                padding-top: 64px !important;
            }
            .width{
                position: absolute;
                width: 100%;
                min-height: 100%;
                top: 50%;
                transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
            }
            .height{
                position: absolute;
                height: 100%;
                min-width: 100%;
                left: 50%;
                transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -o-transform: translateX(-50%);
            }
            .tips{
                padding: 12px;
            }
            .tips p{
                margin: 0;
                line-height: 1.5
            }
            .photo-list{
                background-color: #fff;
                padding: 6px;
            }
            .photo-list .photo-box , .add-btn{
                position: relative;
                float: left;
                margin: 1%;
                width: 23%;
                height: 0;
                padding-bottom: 23%;
                border-radius: 3px;
                overflow: hidden;
            }
            .add-btn{
                border: dashed 1px #DDD;
                font-size: 30px;
            }
            .delete{
                font-size: 20px;
            }
            .add-btn , .delete{
                position: relative;
                font-family: Muiicons;
                font-weight: 400;
                font-style: normal;
                line-height: 1;
                display: inline-block;
                text-decoration: none;
                -webkit-font-smoothing: antialiased;
            }
            .add-btn:after{
                content: '\e468';
                position: absolute;
                left: 50%;
                top: 35%;
                transform: translateX(-50%);
                color: #aaa;
            }
            .delete:after{
                content: '\e401';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                color: #fff;
            }
            .photo-box .delete{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 24px;
                background-color: rgba(0,0,0,.4);
            }
        </style>
        
    </head>

    <body>
        
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">從相冊上傳圖片</h1>
        </header>
        
        <div class="mui-content">
            <div class="tips">
                    <p>上傳照片</p>
            </div>
            <div class="photo-list mui-clearfix" id="list">
                    <div class="photo-box">
                        <img src="../images/activity1.png" />
                        <div class="delete"></div>
                    </div>
                <div class="add-btn" id="btn"></div>
            </div>
        </div>
        
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            
            //DOM獲取及變量
            var list = document.getElementById('list');
            var btn  = document.getElementById('btn');
            var setNum = 9 ;  //圖片最大選擇數量
            
            /* *
             * 調取系統相冊需在API加載完成後發生
             */
            mui.plusReady(function(){
                //添加圖片按鈕點擊
                btn.addEventListener('tap',function(){
                    var num = setNum;
                    if( list.querySelector('.photo-box') ){
                        var box = list.getElementsByClassName('photo-box');
                        num -= box.length;
                    }
                    galleryImgs( num );
                });
                
            },false);
            
            // 從相冊中選擇多張圖片 
            function galleryImgs( num ){
                // 從相冊中選擇圖片
                console.log("從相冊中選擇多張圖片:");
                plus.gallery.pick( function(e){
                        for(var i in e.files){
                            console.log( e.files[i] );
                            insertPhoto( e.files[i] ); //將圖片放在頁面上
                        }
                }, function ( e ) {
                        console.log( "取消選擇圖片" );
                },{ 
                        filter   : "image",     //系統相冊選擇器中可選擇的文件類型 "image" , "video" , "none"
                        multiple : true,        //是否支持多選
                        maximum  : num,         //最多選擇的文件數量，上面設置了全局變量
                        system   : false,       //是否使用系統文件選擇界面，iOS下無效
                        onmaxed  : function(){  //超出選擇最大文件數時觸發
                        mui.toast( '最多選擇' + num + '張圖片' )
                    }
                });
            }
            
            //將選擇的圖片轉base64並加入到頁面中
            function insertPhoto ( data ){
                var imgClass ;  //img的class名
                //建立image對象並轉換base64碼
                var img = new Image();
                    img.src = data ;
                    img.onload = function(){
                        //建立canvas畫布
                        var canvas = document.createElement("canvas"); 
                        //在css中不要直接給img設置寬高,不然此處會獲取到css設置的值
                        var width  = img.width;
                        var height = img.height;
                        //比較圖片寬高設置圖片顯示和canvas畫布尺寸
                        if (width > height) { 
                                imgClass = 'height';
                            if (width > 500) { 
                                height = Math.round(height *= 500 / width); 
                                width = 500; 
                            } 
                        } else { 
                                imgClass = 'width';
                            if (height > 500) { 
                                width = Math.round(width *= 500 / height); 
                                height = 500; 
                            } 
                        } 
                        canvas.width  = width;                               //設置新的圖片的寬度
                        canvas.height = height;                              //設置新的圖片的長度
                        var ctx = canvas.getContext("2d"); 
                        ctx.drawImage(img, 0, 0, width, height);             //繪圖
                        var dataURL = canvas.toDataURL("image/png", 0.8);    //供img標籤使用的src路徑
                        //將最後拿到的圖片類名和src放入頁面中
                        var div = document.createElement('div');
                            div.setAttribute('class','photo-box');
                            div.innerHTML = '<img class="' + imgClass + '" src="' + dataURL + '"/>\
                                            <div class="delete"></div>';
                        list.insertBefore( div , btn );
                        btnHidden();  //顯示或隱藏添加按鈕
                    }
            }
            
            //刪除
            mui('#list').on('tap','.delete',function(){
                this.parentNode.remove();
                btnHidden();  //顯示或隱藏添加按鈕
            })
            
            // 在5+文檔中關於多圖選擇參數中 maximum 的解釋是
            // 取值範圍爲1到Infinity，默認值爲Infinity，即不限制選擇的圖片數。 若是設置的值非法則使用默認值Infinity。
            // 咱們在點擊是會使用 -= 來出來 pNum ，會獲得負值而致使使用默認值
            // 故在每次添加圖片時進行判斷，是否隱藏添加按鈕
            function btnHidden(){
                if ( list.querySelector('.photo-box') ) {
                    var box = list.getElementsByClassName('photo-box');
                    if( box.length > setNum - 1 ){
                        btn.classList.add('mui-hidden');
                    } else {
                        btn.classList.remove('mui-hidden');
                    }
                } else {
                    btn.classList.remove('mui-hidden');
                }
            }
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。