js两张照片和一张

两张照片和一张，首先要定义一个画布，通过该画布，将两张照片重新画一下。

一、在页面h5中定义一个画布

    <canvas id="canvasTotle" style="margin-top:15px;float: left; display:none;" ></canvas>

二、获取到两个img标签，通过 context.drawImage(id1Src,0,0,_width,_height)，重新画照片，

 function drawImage(){
            var canvas = document.getElementById("canvasTotle");
            var context = canvas.getContext("2d");
            //获取照片的宽高和照片的src
            var _width = 1200;
            var _height = 1600;
            var id1Src = document.getElementById("imageSq");
            var id2Src = document.getElementById("imageJh");
            //根据图片宽高确定画布大小并画出一个矩形区域
            canvas.width=_width;
            canvas.height=_height*2;
            var img1=new Image();
            //绘画，上下结构， 坐标系为左上角是00点 向下和向右 为xy轴正向增加
            context.drawImage(id1Src,0,0,_width,_height);//00原点开始画第一个照片
            context.drawImage(id2Src,0,_height,_width,_height);//在 下面画第二张
            //最后将画布转换为图片 base64
             var dataURL = canvas.toDataURL('image/jpeg', 1.0); //转换图片为dataURL
            return dataURL;
        }