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

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

这个方法存在一个弊端：

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

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

HTML部分：

    
贷款申请
    
请提交身份证照片
    

        

            
身份证正面
        
	

	    
身份证反面

	
	

	    
手持身份证
	
	

	    提交
	    上一步
	
    

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("");
	    $('#photo1').css('background-color',"transparent");
	    createNewImg(path);
	} else if (d == 2){
	    $("#photo2").html("");
	    $('#photo2').css('background-color',"transparent");
	    createNewImg(path);
        } else {
	    $("#photo3").html("");
	    $('#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;
	}