微信小程式-canvas產生圖片並儲存到本地

前言

---

需求場景：我們知道，微信小程式可以分享給好友或微信群，不能分享到朋友圈，那分享到朋友圈就需要特殊處理一下，這裡我們把小程式和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，有興趣的朋友可以搞一下。 ###這裡是連結#########推薦教學：《###JS教學###》###

以上是微信小程式-canvas產生圖片並儲存到本地的詳細內容。更多資訊請關注PHP中文網其他相關文章！