最后更新17.01.20

一、首先這是HTML的代碼 將要顯示一張圖片

<img id="my_img_id" class="my_img_class" />

二、然后這是JavaScript代碼

var img_my = document.getElementById('my_img_id');

//點擊添加圖片 
img_my.addEventListener('tap', function() {
    
    //打開相冊（這里之前很多小伙伴問我，為什么打不開，因為我用的是H5+的方式，不適用于純web頁面）
    plus.gallery.pick(
        function(path) {
            img_my.src = path; //設(shè)置img的路徑

            //把圖片base64編碼  注意：這里必須在onload事件里執(zhí)行！這給我坑的不輕
            img_my.onload = function() {
                var data = getBase64Image(img_my);    //base64編碼
                var newImgbase = data.split(",")[1];  //通過逗號分割到新的編碼
                imgArray.push(newImgbase);            //放到imgArray數(shù)組里面
                img_my.off('load');                   //關(guān)閉加載
                }
            },
            function(e) {
                mui.toast('取消選擇');
                });
            });

//base64編碼  
function getBase64Image(img) {
    var canvas = document.createElement("canvas");   //創(chuàng)建canvas DOM元素，并設(shè)置其寬高和圖片一樣
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height); //使用畫布畫圖
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();  //動態(tài)截取圖片的格式
    var dataURL = canvas.toDataURL("image/" + ext);  //返回的是一串Base64編碼的URL并指定格式
    return dataURL;
}
            

三、上傳圖片操作

function uploadimg() {
    
    //這里就可以把添加過圖片的imgArray通過JSON解析成字符串，然后上傳給服務(wù)器
    var imgJson = JSON.stringify(imgArray);
    
    mui.ajax("上傳圖片的地址", {
        data: {
            pic: imgJson,       
        },
        type: 'post',
        timeout: 10000,
        dataType: 'json',
        success: function(data) {
            if(data.error == 0) {   
                mui.toast('上傳成功');  
            } else {
                mui.toast('上傳失敗:'+data.data);
            }
        },
        error: function(xhr, type, errorThrown) {
            mui.toast('錯誤');
        }
    });
}