前言
需求場景：我們知道，微信小程式可以分享給好友或者微信群，不能分享到朋友圈，那分享到朋友圈就需要特殊處理一下，這裡我們把小程式和canvas結合起來使用，生成自定義圖片並儲存到本地。
程式碼
- wxml檔案
<view>
<button type="default" size="defaultSize" bindtap="exportImg">生成圖片</button>
</view>
<canvas canvas-id="myCanvas"></canvas>
複製程式碼- js檔案
通過canvasAPI繪製
const ctx = wx.createCanvasContext('myCanvas');
//繪製背景圖
ctx.drawImage(res.path, 0, 0, screenWidth, 500);
//繪製背景圖上層的頭像
ctx.save();
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(avatarUrl, 50, 50, 110, 110);//根據微信getUserInfo介面獲取到使用者頭像
ctx.restore();
//繪製文字
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(16)
ctx.fillText(userInfo.nickName, 100, 180)//使用者暱稱
ctx.stroke()
ctx.draw()
複製程式碼通過
wx.canvasToTempFilePath獲取本地路徑
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 500,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath);
}
})
複製程式碼通過
wx.saveImageToPhotosAlbum儲存圖片到本地
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,//canvasToTempFilePath返回的tempFilePath
success: (res) => {
console.log(res)
},
fail: (err) => {}
})
複製程式碼簡單的效果圖
總結
canvas的drawImage方法只支援本地圖片，不支援網路圖片，所以頭像和背景圖我都用getImageInfo這個方法轉了一下。- 通過userInfo獲取的頭像是正方形的，不是需求中的圓形，這裡用到了
clip()方法，需要配合save()和restore(),因為裁剪之後如果不恢復，接下來的繪製都會在那個小區域裡面。 - 此次demo沒有使用生成二維碼的api，有興趣的朋友們可以搞一下。此處是連結