使用PHP+微信公众号+canvas生成海报
效果展示:每到节假日可以看到有很多获取个人信息,然后生成指定的海报,那些这些是如何做的呢?首先我们需要一个企业服务号,配置相关服务器,域名等信息,接下来就是代码的编写和开发了,以下是博主的一种写法,供大家参考。1、在csn目录下新建index.php文件,用于授权跳转2、在csn目录下新建getUserInfo.php文件,用于获取用户信息
中秋贺国庆海报生成
functionfontSize(){
vardeviceWidth=document.documentElement.clientWidth>750?750:document.documentElement.clientWidth;
document.documentElement.style.fontSize=(deviceWidth/25)+"px";
}
fontSize();
window.onresize=fontSize;
*,html{font-family:'微软雅黑'}
body{width:100%;max-width:750px;margin:0px;padding:0px;width:100%;text-align:center;font-size:1.5rem;overflow-x:hidden;background-color:#ffb612;font-family:'微软雅黑';}
.app{width:100%;max-width:750px;height:auto;overflow-y:scroll;overflow-x:hidden;background:#fff;}
.appimg{width:100%;height:auto;}
.appp{font-size:1rem;color:#333;line-height:1.2rem;text-align:center;}
.appa{list-style:none;outline:none;text-decoration:none;display:block;color:#fff;background:#f05555;font-size:1.2rem;height:3rem;line-height:3rem;margin:0auto;margin-bottom:1.2rem;}
//图片上传
letcanvas=document.createElement('canvas')
canvas.width="1024"
canvas.height="1374"//创建画布,并设置宽高
letctx=canvas.getContext("2d")
letwx_img='';
wx_img=wx_img.substr(0,wx_img.length-3);
//随机背景图片
varbgImg='./bg.jpg';//背景图
varqcode='./qcode.jpg';//验证码
loadImg([
bgImg,
wx_img+'0',
qcode,
]).then(([img1,img2,qcode])=>{
ctx.drawImage(img1,0,0,1024,1374)//画布上先绘制背景图`
drawRoundRect(ctx,100,782,93,87,87,img2);//绘制头像
drawRoundRect(ctx,2,782,1168,90,90,qcode);//绘制二维码
//对象-行高-文字一行内的数量-文本-x坐标位置-y
writeTextOnCanvas(ctx,30,50,'',750,153,'#fff','normal25pxMicrosoftYaHei');//名字
imageURL=canvas.toDataURL("image/png")//获取图片合并后的data-URL,参数可选图片格式,图片质量,详自查API`
letimg3=newImage()
$('#app').fadeIn();
document.getElementsByClassName("app")[0].append(img3)
img3.src=imageURL
canvas.style.display="none"
$("#app").append("长按图片保存关闭")
});
//}
//画圆形头像方法
//r:半径
functiondrawRoundRect(ctx,r,x,y,w,h,img){
ctx.save()
if(w{
resolve(img)
}
img.onerror=(err)=>{
alert('图片加载失败')
}
})
})
returnPromise.all(promise)
}
functionShowTheObject(obj){
vardes="";
for(varnameinobj){
des+=name+":"+obj[name]+";";
}
returndes;
}
//点击关闭按钮关闭
functioncolse(){
$('#app').html('')
$('#app').fadeOut()
$('.username').val('')
$('.tel').val('')
$('.rank').val('')
}
wx.config({
debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId:'',//必填,公众号的唯一标识
timestamp:'',//必填,生成签名的时间戳
nonceStr:'',//必填,生成签名的随机串
signature:'',//必填,签名,见附录1
jsApiList:[
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]//必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.error(function(res){
console.log(res.errMsg)
})
varwstitle="中秋国庆月饼海报生成";//此处填写分享标题
varwsdesc='中秋国庆海报生成,长按图片保存即可。';//此处填写分享简介
varwslink="http://h5.example.com/csn";//此处获取分享链接
varwsimg="";//此处获取分享缩略图
3、分享wxshare.js文件代码wx.ready(function(){
//分享到朋友圈
wx.onMenuShareTimeline({
title:wstitle,
link:wslink,
imgUrl:wsimg,
success:function(){
alert('分享成功');
},
cancel:function(){
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title:wstitle,
desc:wsdesc,
link:wslink,
imgUrl:wsimg,
success:function(){
alert('分享成功');
},
cancel:function(){
}
});
//分享到QQ
wx.onMenuShareQQ({
title:wstitle,
desc:wsdesc,
link:wslink,
imgUrl:wsimg,
success:function(){
alert('分享成功');
},
cancel:function(){
}
});
//微信到腾讯微博
wx.onMenuShareWeibo({
title:wstitle,
desc:wsdesc,
link:wslink,
imgUrl:wsimg,
success:function(){
alert('分享成功');
},
cancel:function(){
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title:wstitle,
desc:wsdesc,
link:wslink,
imgUrl:wsimg,
success:function(){
alert('分享成功');
},
cancel:function(){
}
});
});说明:通过微信公众号获取用户信息,包含昵称,头像信息,使用js的canvas画布生成海报,长按图片,即可保存生成的海报。