微信小程序探险记 - 生成图片分享

前言

最近几天作者一直在忙着开发一个C端微信小程序商城项目(wepy 1.7.x, 不得不吐槽坑超级多，被虐的不要不要的，下个版本打算 taro + ts 重构, 差点被逼疯了..)

今天就有个生成图片分享的需求，需要实现。具体探险经历如下

业务需求

如图所示，在点击保存的时候，生成上方的图片并保存。

具体实现

需要保存的区域要用canvas绘制，之后使用wx.canvasToTempFilePath 生成本地图片 以及 wx.saveImageToPhotosAlbum 保存图片

1. 创建 canvas 画布

<canvas
  class="home-share__canvas" // 内部添加样式，主要是宽高
  canvas-id="shareCanvas"
/>

2. 绘制画布

const ctx = wx.createCanvasContext('shareCanvas')
// banner图
ctx.drawImage('../../../assets/share/banner.png', 0, 0, 240, 40)
ctx.drawImage('../../../assets/share/title.png', 82, 9.5, 76, 21)

// 画矩形
ctx.setFillStyle('white')
ctx.fillRect(0, 40, 240, 240)

ctx.setFillStyle('white')
ctx.fillRect(0, 280, 240, 100)

// 价格文字
ctx.setFillStyle('#ff0136') // 文字颜色：黑色
ctx.setFontSize(30) // 文字字号：22px

ctx.font = 'bold 30px DIN Alternate' // 字体可以这样设置样式
ctx.fillText('996', 20, 300)

......

ctx.stroke()
ctx.draw()

3. 生成图片

wx.canvasToTempFilePath({
  canvasId: 'shareCanvas',
  success: function(res) {
    console.log(res.tempFilePath) // 生成的图片地址
  }
})

4. 保存图片

saveImageToPhotosAlbum(imgUrl) { // imgUrl 即是上方的 res.tempFilePath
    if (imgUrl) {
        wx.saveImageToPhotosAlbum({
            filePath: imgUrl,
            success: res => {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              })
            },
            fail: err => {
              wx.showToast({
                title: '保存失败',
                icon: 'none',
                duration: 2000
              })
            }
        })
    } else {
      wx.showToast({
        title: '绘制中……',
        icon: 'loading',
        duration: 3000
      })
    }
}

ps: 需要授权 writePhotosAlbum, 中间需要加入授权的逻辑

So Easy

别人写了一半的项目, 持续踩坑中...