最终生成可长按保存的图片
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);
浙公网安备 33010602011771号