Page({
  data: {
    show: false,
    canvasWidth: 0,
    canvasHeight: 0,
  },
  showPic() {
    this.setData({
      show: true
    })//将canvas显示出来
    const that = this;
    wx.getSystemInfo({
      success(res) {
        that.setData({
          canvasWidth: res.windowWidth,
          canvasHeight: 0.543 * res.windowWidth//比例系数根据收据模板
        })
      }
    })
    wx.createSelectorQuery().select('#receiptPic').fields({
      node: true,
      size: true
    }).exec(res => {
      console.log(res)
      this.drawReceipt(res);//绘制收据
      this.setData({
        showRes: res
      })
    })
  },
  drawReceipt(res) {
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');
    canvas.width = res[0].width;
    canvas.height = res[0].height;
    console.log(canvas.width, canvas.height)
    //ctx.scale(dpr, dpr);
    const bg = canvas.createImage();
    bg.src = "https://gitee.com/fromEarthIGo/let/raw/master/statics/receipt.jpg";//收据模板
    bg.onload = () => {
      ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
    }
  },
  previewReceipt() {//canvas点击预览事件
      wx.canvasToTempFilePath({
        canvasId: this.data.showRes[0].node.id,//不知道是不是这里有问题
        success(res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          wx.previewImage({
            urls: [tempFilePath],
            current: tempFilePath
          })
        },
        fail(res) {
          console.log(res)
        }
      })
  },
})

我的想法是，先通过点击一个按钮来显示和绘制canvas，接着如果想预览canvas的话，就用wx.canvasToTempFilePath先生成图片地址，再用wx.previewImage来查看，但是出现了下面截图中的问题：

请问有人知道应该怎么解决吗？恳请大神们不吝赐教

复现代码：https://developers.weixin.qq.com/s/9xNpRbmX7TNU