小程序生成分享图记录

最近接手开发了一个小程序项目，里面有一个分享封面图功能，做的过程中遇到了一些问题，特此记录

因为目前在小程序中是没有截屏功能的，如果我们需要生成一张完整的封面图做分享，前端最方便的方案大概就是使用canvas了，利用canvas的图片导出功能，可以很方便的生成一张完整的图出来，下面就记录一下过程中遇到的问题

主界面

生成的图

rpx转px

因为canvas中是没有rpx这个单位的，所以当我们在绘制的过程中，先要把rpx转为px

rpxToPx(rpx) {
    let px = Math.ceil(rpx / 750 * windowWidth) // windowWidth可以在全局变量中先存储
    return px
  }

绘制单行文字

这里一共用到了小程序里面的两个api，和一个属性

ctx.setFillStyle：设置字体颜色 ctx.setFillStyle(color)
ctx.font: 设置字体属性 normal weight 16px sans-serif
ctx.fillText 绘制字体这个api需要注意的是，x和y的坐标是定在文字的左下角的，我们一般画图的x和y都是左上角。当我们画文字时，y的坐标就需要加上文字的行高 ctx.fillText(text, x, y + text.lineHeight)

绘制多行文字

当我们如果需要绘制的文字过长，但是canvas里面又没有自动换行的功能，这时就需要我们手动计算每行文字的显示长度，然后进行截取，这里用到了一个api
measureText: 它可以测量文本尺寸信息，返回当前文字的宽度

width = ctx.measureText(str).width

然后我们进行累加，当中宽度超出最大宽度的时候，就进行截取，然后重新计算宽度，示例代码

  let lastSubStrIndex = 0
  let lineHeight = item.lineHeight
  let initHeight = item.y
for(let i = 0; i < str.length; i++){
      lineWidth += ctx.measureText(str[i]).width
      if(lineWidth > maxWidth){
        ctx.fillText(str.substring(lastSubStrIndex, i), item.x, initHeight)
        initHeight += lineHeight
        lastSubStrIndex = i
        lineWidth = 0

      }
      if (i == str.length - 1) {//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), item.x, initHeight)
      }
    }

圆角矩形

drawRect(ctx,obj){
    let x = obj.x // x坐标
    let y = obj.y // y坐标
    let w = obj.w // 宽度
    let h = obj.h // 高度
    let r = obj.r // 半径
    ctx.beginPath();
    ctx.setFillStyle('#fff');
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.lineTo(x + w, y + r);
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + w, y + h - r);
    ctx.lineTo(x + w - r, y + h);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + h);
    ctx.lineTo(x, y + h - r);

绘图

在小程序中，我们如果想把网络图片绘制到canvas中，事先需要先把图片缓存下来，可以使用getImageInfo先把图片缓存下来

wx.getImageInfo({
      src: imgUrl,
      success: (res) => {
        imgUrl = res.path
       
      }
    })

保存图片

function savePicToAlbum(tempFilePath,callback) {
  let that = this;
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success(res) {
                wx.showToast({
                  title: '保存成功'
                });
                callback && callback()
              }
            })
          },
          fail() {
            // 用户拒绝授权,打开设置页面
            wx.openSetting({
              success: function (data) {
                console.log("openSetting: success");
              },
              fail: function (data) {
                console.log("openSetting: fail");
              }
            });
          }

        })
      } else {
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
            });
          },
          fail(res) {
            console.log(res);
          }
        })
      }
    },
    fail(res) {
      console.log(res);
    }
  })
}

最后推荐一个小程序里面的图片裁剪组件we-cropper

小程序 生成分享图 记录