如何制做国旗头像，微信小程序利用 canvas 绘制挂件头像

昨天朋友圈被「请给我一面国旗@微信官方」刷屏，虽然知道是假的，可是从另外一个角度来看，弄清楚如何实现更有趣。

一、canvas

这就不得不提到小程序中的 API canvas，H5 中也是有 canvas 的，不过以前也一直没有机会用，此次正好伺机试试水。

晚上回家看了下官方文档，网上搜了一些相似的功能实现，最后写好了一个 demo，基本上是能初步绘制国旗头像了。

固然之后若是想要绘制其余带挂件的头像，只须要更改挂件素材便可，提早预定帮大家定作今年的圣诞帽。

 

二、代码来了

实现过程主要分为如下几个步骤：

一、新建 canvas 画板

二、绘制头像当作背景（demo 目前是自行上传头像制做）

三、绘制国旗边框

四、保存到手机相册（需受权）

废话很少说，直接上代码：

// 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' }) } }) } }) }

 

三、最后

demo 写完了，以小程序的尿性，怎么会没有坑呢？发现真相的我眼泪差点掉下来，并且这个坑不是通常的坑，弄了老半天都没解决。

具体是啥坑小程序留言区揭晓，感兴趣的欢迎来留言讨论如何解决，到发文为止依旧是个巨坑。

公众号「我是玖柒后」后台回复「头像」便可获取 demo 源码，填坑不忘挖坑人，我太南了。

 

 推荐文章：

小程序九九八十一坑之跳转传参

原文出处：https://www.cnblogs.com/msunh/p/11587120.html