昨天朋友圈被「請給我一面國旗@微信官方」刷屏，雖然知道是假的，但是從另一個角度來看，弄清楚如何實現更有趣。 1、canvas 這就不得不提到小程式中的 API canvas，H5 中也是有 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 源碼，填坑不忘挖坑人，我太南了。
推薦文章：
