昨天朋友圈被「请给我一面国旗@微信官方」刷屏，虽然知道是假的，但是从另一个角度来看，弄清楚如何实现更有趣。
1、canvas
这就不得不提到小程序中的 API canvas，H5 中也是有 canvas 的，不过之前也一直没有机会用，这次正好乘机试试水。
晚上回家看了下官方文档，网上搜了一些类似的功能实现，最后写好了一个 demo，基本上是能初步绘制国旗头像了。
当然以后如果想要绘制其他带挂件的头像，只需要更改挂件素材即可，提前预约帮你们定做今年的圣诞帽。
2、代码来了
实现过程主要分为以下几个步骤：
1、新建 canvas 画板
2、绘制头像当做背景（demo 目前是自行上传头像制作）
3、绘制国旗边框
4、保存到手机相册（需授权）
废话不多说，直接上代码：
- // wxml 页面
- <view class="container">
- <!-- 头像绘制区域 -->
- <canvas canvas-id="myAvatar" class="canvas"></canvas>
- <!-- 按钮 -->
- <button class="btn-save" bindtap="upload">上传头像</button>
- <button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>
- </view>
- // 部分功能 js
- // 绘制头像背景
- drawAvatar() {
- var that = this;
- var p = that.data;
- context = wx.createCanvasContext('myAvatar', this);
- context.drawImage(p.src, 0, 0, 256, 256);
- context.draw(true)
- context.save();
- context.translate(p.hat.x, p.hat.y)
- context.scale(p.hat.b, p.hat.b)
- context.rotate(p.hat.rotate * Math.PI / 180)
- context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)
- context.draw(true)
- this.setData({
- save: true
- })
- },
- // 保存图片
- saveImg() {
- wx.canvasToTempFilePath({
- canvasId: 'myAvatar',
- success(res) {
- wx.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success(res) {
- wx.showToast({
- title: '保存成功'
- })
- },
- fail(res) {
- wx.showToast({
- title: '取消保存...',
- icon: 'none'
- })
- }
- })
- }
- })
- }
3、最后
demo 写完了，以小程序的尿性，怎么会没有坑呢？发现真相的我眼泪差点掉下来，而且这个坑不是一般的坑，弄了老半天都没解决。
具体是啥坑小程序留言区揭晓，感兴趣的欢迎来留言讨论如何解决，到发文为止依旧是个巨坑。
公众号「我是玖柒后」后台回复「头像」即可获取 demo 源码，填坑不忘挖坑人，我太南了。
微信识别二维码，在线体验！
转载请注明：我是玖柒后 » 教程 | 小程序七十二变之 canvas 绘制国旗头像
