js把两张照片合成一张

function drawAndShareImage(number){
			    var canvas = document.createElement("canvas");
			    canvas.width = 500;
			    canvas.height = 250;
			    var context = canvas.getContext("2d");
			
			    context.rect(0 , 0 , canvas.width , canvas.height);
			    context.fillStyle = "#fff";
			    context.fill();
			
			    var myImage = new Image();
			    myImage.src = "img/u=3555676303,1696231147&fm=26&gp=0.jpg";    //背景图片  你自己本地的图片或者在线图片
			    myImage.crossOrigin = 'Anonymous';
			
			    myImage.onload = function(){
			        context.drawImage(myImage , 0 , 0 , 500 , 250);
			
			       context.font = "30px Courier New";
			        context.fillText("照片合成",130,50);
			
			        var myImage2 = new Image();
			        myImage2.src = "img/usericon.png";   //你自己本地的图片或者在线图片
					
			        myImage2.crossOrigin = 'Anonymous';
					myImage2.style.border="1px solid red"
			        
			        myImage2.onload = function(){
			            context.drawImage(myImage2 , 0,0, 100 , 100);
			            var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
			            var img = document.getElementById('avatar');
			
			            // document.getElementById('avatar').src = base64;
			            img.setAttribute('src' , base64);
			        }
			    }
			}

drawImage(myImage , 0 , 0 , 500 , 250);参数记录
myImage ：需要剪辑的图片
0 : 开始剪切的 x 坐标位置。
0 : 开始剪切的 y 坐标位置。
500 : 被剪切图像的宽度。
250 : 被剪切图像的高度
参考链接：https://www.w3school.com.cn/html5/canvas_drawimage.asp