HTML5+ 呼叫手機相簿圖片，轉化為bas64編碼上傳並顯示。

這個方法存在一個弊端：

圖片轉碼為Base64格式時間長，上傳時間長，如果使用者在base64編碼轉換完成前，點選提交按鈕，會導致沒有上傳或者上傳有誤。

故，不建議使用。更好的方式是使用檔案上傳，見另一篇文章。

HTML部分：

<div id="IDcard">
    <div class="top">貸款申請</div>
    <h1>請提交身份證照片</h1>
    <form>
        <div class="positive photo" onclick="pickImg(1)" id='photo1'>
            <p>身份證正面</p>
        </div>
<div class="example photo" onclick='pickImg(2)' id='photo2'>
<p>身份證反面</p><img src="images/IDcard.jpg" class="card_img"><a class="card_img_btn"></a>
</div>
<div class="hand_card photo" onclick='pickImg(3)' id='photo3'>
<p>手持身份證</p>
</div>
<div class="btn">
<a class="submit">提交</a>
<a class="back">上一步</a>
</div>
    </form>
</div>
 

JS部分：

// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢，現在可以正常呼叫擴充套件API 
function onPlusReady() {
}
//點選選取圖片函式
function pickImg(d){
//呼叫HTML5+開啟手機相簿擴充套件API
    plus.gallery.pick( function(path){
//判斷點選了哪個元素，哪個元素的innerHTML被替換，圖片高度設定為100%，避免圖片被豎向壓縮變形，同時改變背景色為透明。
if(d == 1){
$("#photo1").html("<img src='"+path+"' style='height:100%'>");
$('#photo1').css('background-color',"transparent");
createNewImg(path);
} else if (d == 2){
$("#photo2").html("<img src='"+path+"' style='height:100%'>");
$('#photo2').css('background-color',"transparent");
createNewImg(path);
        } else {
$("#photo3").html("<img src='"+path+"' style='height:100%'>");
$('#photo3').css('background-color',"transparent");
createNewImg(path);
}
    },
    function(e){
console.log("取消選擇圖片");
    },
    {filter: "images"});
}
    //建立image物件
    function createNewImg(a){
image = new Image();
        //解決圖片跨域問題（不太懂~_~）
image.crossOrigin = '';
        //設定圖片路徑
image.src = a;
        //圖片載入完後的回撥函式,呼叫轉碼函式
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
        }
    }
    //將圖片轉換成Base64編碼格式函式(後端同事百度來給我的，感謝~)
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
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();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}