微信授权登录获取用户信息并使用canvas绘制头像

制作一个h5,需要把用户头像绘制在一张图片上,现在一般都是在前端使用canvas绘制头像以减轻服务器的压力

制作了一个简易demo:

github地址:https://github.com/crazyming9528/wechat_login_canvas_avatar

思路:

1.微信授权获取到用户信息

2.canvas绘制图片源 不能有跨域 因此 我先把微信头像保存到服务器,然后生成base64返回给前端

<img id="bg" src="./bg/bg.jpg" style="display: none"  alt="">
    <img id="avatar" src="<?php echo $headimgurl?>"  style="display: none" alt="">

var bg = document.getElementById("bg");//img tag

bg.onload=function () {
    var ctx = dom.getContext('2d');
    ctx.drawImage(bg,0,0);
    ctx.drawImage(avatar,0,0,100,100);
    ctx.font = "30px Helvetica, Arial, sans-serif";
    ctx.fillText("hello<?php echo $nickname?>", 65, 127);
    dom.toDataURL();//转base64 如果需要的话 可以创建一个img标签 src 使用它,生成的图片 用户就可以长按保存}