如何制作國旗頭像，微信小程序利用 canvas 繪制掛件頭像

昨天朋友圈被「請給我一面國旗@微信官方」刷屏，雖然知道是假的，但是從另一個角度來看，弄清楚如何實現更有趣。

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 源碼，填坑不忘挖坑人，我太南了。

 

 推薦文章：

小程序九九八十一坑之跳轉傳參