微信小程序使用canvas实现生成海报图的功能

最新推荐文章于 2024-09-03 10:47:35 发布

chikou1893

最新推荐文章于 2024-09-03 10:47:35 发布

阅读量1.3k

点赞数 1

原文链接：https://my.oschina.net/mdu/blog/3099092

版权

最近开发中要实现一个需求，用户点击分享生成一个图片海报，可以供用户发朋友圈或者其他使用（感觉没人会用~），用到了小程序canvas，和web上的功能基本一样，记录一下。

---还没上线一周，这个功能就被撤了

首先预设几个工具函数

1/小程序开发使用的是 rpx，但是canvas里的单位使用的 px ，就需要转换设计图的尺寸

// 单位转换
const rpx2px = rpx => deviceWidth / 750 * rpx

其中deviceWidth就是设备的宽度，可以通过wx.getSystemInfo()获取到，即windowWidth

2、获取网络图片的信息

// 获取图片信息
const getImageInfo = url => {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: url,
      success: resolve,
      fail: reject,
    })
  })
}

需要注意的是需要添加downloadFile的合法域名

3、文本换行

/**
 * 设置文本行数，超出省略
 * @param {object} ctx canvas实例
 * @param {string} text 文本数据
 * @param {number} lineNum 行数
 * @param {number} width 文字宽度最宽默认 620rpx
 * 返回 由每一行组成的数组
 */
const setTextLine = (ctx, text, lineNum = 1, width = 610) => {
  const str_arr = String(text).split('')
  width = rpx2px(width)
  let temp = ''
  // 分行
  let row_arr = str_arr.reduce((arr, word) => {
    const w = ctx.measureText(temp).width
    if (w < width) {
      temp += word;
    } else {
      arr.push(temp)
      temp = word
    }
    return arr
  }, [])
  row_arr.push(temp)
  temp = ''

  // 判断需要的行数
  row_arr = row_arr.slice(0,lineNum)
  if (row_arr.length > 1){
    // 最后一行超出则省略号
    row_arr[row_arr.length - 1].split().every(v => {
      temp += v
      if (ctx.measureText(temp).width > (width - 20)) {
        temp += '...'
        return false
      }
      return true
    })
    // row_arr.pop()
    // row_arr.push(temp)
    row_arr.splice(row_arr.length - 1, 1, temp)
  }

  return row_arr
}

这里就是借助ctx.measureText()来获取文本的宽度，看是否会超出canvas的宽度，然后根据传参来控制行数，原理就是给最后一行的内容添加省略号即可，函数里我没有判断仅需一行但是超出一行的情况，因为我们是允许2行的，所以不需要判断，有需要可以自行添加

接下来就可以执行绘制过程了，首先如果我们有用到网络图片。则需要在图片下载到本地后开始，

...
const url1 = getImageInfo(url1)
const url2 = getImageInfo(url2)
Promise.all([product_img]).then(([url1, url2]) => {
...
})
...

这里就是用到了promise，不熟的可以看这里promise

在Promise.all中获取canvas

		...
        const ctx = wx.createCanvasContext('myCanvas', this)
        // 绘制背景
        const canvas_W = rpx2px(705)
        const canvas_H = rpx2px(1180)
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, canvas_W, canvas_H)
		...

绘制背景的目的是防止生成的图片无内容区域透明，当然有特殊需求的可以不接下来的绘制图片的话，使用的ctx.drawImage()这个API，传入图片的左上角坐标和宽高即可，示例：

        // 绘制logo
        const logo_SX = rpx2px(35)
        const logo_SY = rpx2px(23)
        const logo_W = rpx2px(253)
        const logo_H = rpx2px(80)
        ctx.drawImage('/images/logo.png', logo_SX, logo_SY, logo_W, logo_H)

绘制文本时，如果文本长度不确定，使用上述封装的函数处理文本内容，超出添加省略号即可，使用ctx.fillText()绘制

全部绘制完成之后，调用ctx.draw(cb)将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。如果不操作生成图片，到这一步就结束了，需要生成图片操作的，在回调函数中进行操作即可

        ctx.draw(false, () => {
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            quality: 1,
            success: result => {
              ...something
            }
          }, this)
        })

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功. 这里的quality是对jpg格式图片的压缩范围，0-1之间的值，web上使用canvas，在toDataURL的第二个参数，可以实现压缩图片(jpg/webp)

图片保存到手机：

          wx.saveImageToPhotosAlbum({
            filePath: result.tempFilePath,
            success: res1 => {
              app.showTips(0, '图片已保存')
            },
            fail: err => {
              app.showTips(0, '图片生成失败')
            }
          })

到这里图片保存完成，但是实际使用中，该功能需要使用用户的相册权限，如果用户拒绝了授权，在下次调用的时候，就会直接失败所以需要给用户一个友好的提示，即使用wx.getSetting获取用户授权情况，如果用户拒绝过授权，则提示用户进入设置页面手动进行授权

另外一个问题是图片的生成质量，如果图片生成之后不够高清，可以考虑将像素倍数提升

完整代码已上传GitHub可以测试：https://github.com/dudumifan/WeChat-Mini-Program-Generate-poster

转载于:https://my.oschina.net/mdu/blog/3099092