微信小程序中canvas遇坑

遇到问题: 页面上直接使用canvas来预览图片,生成图片时(导出图片更大)图片模糊
解决办法: 使用wx.canvasToTempFilePath生成图片后用image预览

在上述解决办法中又遇到以下两个问题:
1.canvas无法使用display:none等方法隐藏(包括隐藏父容器),这会使得生成图片为空
解决办法:

<canvas class="canvas" canvas-id="invitationImage"></canvas>
<view class="invitation-main">
  <view class="invitation-image">
    <image class="image" src="{{imageUrl}}"></image>
  </view>
  <view class="invitation-operations">
    <view class="operations-item">
      <image src="{{baseUrl}}static/invitation/icon_qx.png"></image>
      <view>取消</view>
    </view>
    <view class="operations-item">
      <image src="{{baseUrl}}static/invitation/icon_wx.png"></image>
      <view>微信好友</view>
    </view>
    <view class="operations-item">
      <image catchtap="saveImage" src="{{baseUrl}}static/invitation/icon_bc.png"></image>
      <view>保存到手机</view>
    </view>
  </view>
</view>

.canvas {
  width: 750px;
  height: 1334px;
}
.invitation-main{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

将canvas放在容器外面,容器绝对定位占全屏已达到遮挡目的,效果图如下

2.wx.canvasToTempFilePath时必须draw()完成,否则生成图片也为空
尝试1:

drawImage: function(){
  const ctx = wx.createCanvasContext('invitationImage')
  // ctx.drawImage("/images/invitation/img_fx.png", 0, 0, 262, 466)
  ctx.drawImage("/images/invitation/img_fx.png", 0, 0, 750, 1334)
  ctx.rotate(-5 * Math.PI / 180)
  // ctx.drawImage("/images/invitation/code.png", 92, 253, 57, 57)
  ctx.drawImage("/images/invitation/code.png", 265, 723, 164, 164)
  ctx.draw()
},
getImage: function(){
  let that = this
  console.log("getImage")
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 750,
    height: 1334,
    // width: 262,
    // height: 466,
    destWidth: 750,
    destHeight: 1334,
    canvasId: 'invitationImage',
    success(res) {
      console.log("tempFilePath",res.tempFilePath)
      that.setData({
        imageUrl: res.tempFilePath
      })
    },
    fail() {
      console.log("fail")
    }
  })
  console.log("getImageEnd")
},

onLoad: function(options) {
  this.drawImage()
},
onReady: function () {
  let that=this
  that.getImage()
},

在文档加载时drawImage,完成时调用getImage;发现此操作有时有效有时无效

尝试2:

onLoad: function(options) {
 this.drawImage()
},
onReady: function () {
  let that=this

  setTimeout(function () {
    that.setData({
      isOk: true
    })
    that.getImage()
  }, 2000)
},

延时操作getImage,添加isOk字段控制加载提示,效果良好,达到预期

欢迎大家讨论,指教