如何製做國旗頭像，微信小程序利用 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