HTML5+调用手机相册，转码为base64并替换元素背景图

HTML5+ 调用手机相册图片，转化为bas64编码上传并显示。

这个方法存在一个弊端：

图片转码为Base64格式时间长，上传时间长，如果用户在base64编码转换完成前，点击提交按钮，会导致没有上传或者上传有误。

故，不建议使用。更好的方式是使用文件上传，见另一篇文章。

HTML部分：

<div id="IDcard">
    <div class="top">贷款申请</div>
    <h1>请提交身份证照片</h1>
    <form>
        <div class="positive photo" οnclick="pickImg(1)" id='photo1'>
            <p>身份证正面</p>
        </div>
	<div class="example photo" οnclick='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" οnclick='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;
	}