uni-app canvasToTempFilePath:fail Failed to execute

uni-app canvasToTempFilePath:fail Failed to execute

示例代码：

<template>  
  <view class="c-display-flex-V-center my-page-container" @click="downloadImg">  
    <canvas type="2d" id="myCanvas" class="my-page-canvas" />  
  </view>  
</template>  

<script>  
const ctxW = 280;  
const ctxH = 275;  
export default {  
  name: 'invitation',  
  components: {  
    myGridItem,  
  },  
  data() {  
    return {  
      canvasObject: undefined,  
    };  
  },  
  beforeCreate() {  
    console.log('beforeCreate enter');  
  },  
  created() {  
    console.log('created enter');  
  },  
  mounted() {  
    console.log('mounted enter');  
  },  
  onLoad(option) {  
    console.log('onLoad');  
  },  
  onReady() {  
    this.drawCanvas();  
  },  
  methods: {  
    drawCanvas() {  
      const query = uni.createSelectorQuery().in(this);  
      let _this = this;  

      query.select("#myCanvas")  
        .fields({  
          node: true,  
          size: true,  
        })  
        .exec(async (res) => {  
          _this.canvasObject = res[0].node.id;  
          const canvas = res[0].node;  
          const ctx = canvas.getContext('2d');  

          let offsetY = 15;  
          const dpr = wx.getSystemInfoSync().pixelRatio;  
          canvas.width = ctxW * dpr;  
          canvas.height = ctxH * dpr;  
          ctx.scale(dpr, dpr);  

          let _offsetY = offsetY;  
          const imageSrc = '../../static/images/invitation_head.png';  
          let image = canvas.createImage();  
          await new Promise(resolve => {  
            image.onload = resolve;  
            image.src = imageSrc;  
          });  
          ctx.drawImage(image, (ctxW - 250) / 2, _offsetY, 250, 35);  

          offsetY += (35 + 10);  
          ctx.fillStyle = '#f3f3f3';  
          ctx.fillRect((ctxW - 200) / 2, offsetY, 200, 200);  
        });  
    },  
    downloadImg() {  
      uni.showLoading({  
        title: '正在下载...',  
      });  
      uni.canvasToTempFilePath({  
        canvas: this.canvasObject,  
        x: 0,  
        y: 0,  
        width: ctxW,  
        height: ctxH,  
        destWidth: ctxW,  
        destHeight: ctxH,  
        quality: 1.0,  
        success: function(res) {  
          uni.saveImageToPhotosAlbum({  
            filePath: res.tempFilePath,  
            success: function(saveRes) {  
              uni.showToast({  
                title: '保存成功',  
              });  
            },  
            fail: function(saveErr) {  
              if (saveErr.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||  
                saveErr.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||  
                saveErr.errMsg === 'saveImageToPhotosAlbum:fail authorize no response'  
              ) {  
                uni.showModal({  
                  title: '需要您授权保存相册',  
                  modalType: false,  
                  success: modalRes => {  
                    uni.openSetting({  
                      success(settingRes) {  
                        if (settingRes.authSetting['scope.writePhotosAlbum']) {  
                          wx.showModal({  
                            title: '温馨提醒',  
                            content: '获取权限成功，再次点击保存即可~',  
                            modalType: false,  
                          })  
                        } else {  
                          wx.showModal({  
                            title: '温馨提醒',  
                            content: '获取权限失败，将无法保存到相册哦~',  
                            modalType: false,  
                          })  
                        }  
                      },  
                      fail(settingError) {  
                        console.log('settingError', JSON.stringify(settingError));  
                      },  
                    });  
                  },  
                });  
              }  
            },  
          });  
        },  
        fail: function(err) {  
          uni.showToast({  
            title: '生成图片失败',  
          });  
        },  
      }, this);  
    },  
  },  
}  
</script>  

<style scoped>  
.my-page-container {  
  background-color: white;  
  height: 500px;  
}  

.my-page-canvas {  
  width: 280px;  
  height: 275px;  
}  

.my-page-canvas-core {  
  box-sizing: border-box;  
  width: 280px;  
  height: 275px;  
  padding: 15px;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  

.core-head-image {  
  width: 250px;  
  height: 35px;  
}  

.core-content-image {  
  margin-top: 10px;  
  width: 200px;  
  height: 200px;  
  background-color: #f3f3f3;  
}  
</style>

操作步骤：

• 点击图片区域，即可触发下载任务。

预期结果：

• 能够生成图片并保存到相册中。

实际结果：

• 生成图片失败。

bug描述：

• Canvas绘制并生成图片失败，报错信息如下：

  {"errMsg":"canvasToTempFilePath:fail Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)'"}