制作一个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 使用它,生成的图片 用户就可以长按保存}
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里