利用canvas合并2张图片，并以图片或base64形式输出

var id1Src=document.getElementById("id_img1"); 
var id2Src=document.getElementById("id_img2");
function getBase64(id1Src，id2Src){
    var _width=parseInt($("#id_img1").width()/2.3);
    var _height=parseInt($("#id_img1").height()/2.3);
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.drawImage(id1Src, 130, 135, _width, _height);
    context.drawImage(id2Src, 130, 410, _width, _height);
    var newImg = new Image();
    newImg.src = canvas.toDataURL("image/png");

    var _base64=newImg.src.split("base64,")[1];
    return _base64;
}

说明：newImg即为转换出的图片，_base64即为图片的base64值。

-----------------------------------------------------后期发现直接将图片缩小会使照片变的模糊，思考了发现有2个问题：

1.用drawImage的时候缩小照片使照片掉清晰度。2.有些函数应该在照片加载过后才进行，即利用img.onload()。修改后代码如下:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//获取照片的宽高和照片的src
var _width = parseInt($("#id_img1").width());
var _height = parseInt($("#id_img1").height());
var id1Src = document.getElementById("id_img1");
var id2Src = document.getElementById("id_img2");
//根据图片宽高确定画布大小并画出一个矩形区域
canvas.width=_width*2;
canvas.height=_height*4.5;
context.clearRect(0,0,canvas.width,canvas.height);


var img1=new Image();
img1.src =$("#id_img1").attr("src");
img1.οnlοad=function(){
    //绘画
    context.drawImage(id1Src,0.5*_width,_height,_width,_height);
}
var img2=new Image();
img2.src =$("#id_img2").attr("src");
img2.οnlοad=function(){
    //绘画
    context.drawImage(id2Src,0.5*_width,2.5*_height,_width,_height);
    //最后将画布转换为图片
    var dataURL = canvas.toDataURL('image/png', 1); //转换图片为dataURL
    callBase(dataURL,count);
}