function drawAndShareImage(wxPhoto,wxName){ var canvas = document.createElement("canvas"); canvas.width = 552; canvas.height = 860; 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/share/bg.jpg"; //背景图片 本地的图片或者在线图片 myImage.crossOrigin = 'Anonymous'; myImage.onload = function(){ context.drawImage(myImage , 0 , 0 , 552 , 860); context.font = "27px 微软雅黑"; context.fillText(wxName,282,175); var myImage2 = new Image(); myImage2.src = wxPhoto; //本地的图片或者在线图片 myImage2.crossOrigin = 'Anonymous'; myImage2.onload = function(){ context.drawImage(myImage2 , 60 , 145 , 115 , 115); var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下 var img = document.getElementById('save'); // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); } } }
如果多张图片,可以自行添加
var myImage3 = new Image(); myImage3.src = wxPhoto; //本地的图片或者在线图片 myImage3.crossOrigin = 'Anonymous';
加载时load进去:
context.drawImage(myImage3 , 60 , 145 , 115 , 115);