uni-app 组件中的canvas转化为图片报错：errMsg：“canvasToTempFilePath:fail canvas is empty”

在uni-app组件中，将canvas转化为图片时，如果出现errMsg：“canvasToTempFilePath:fail canvas is empty”的报错，可能是因为canvas层级过高导致的。解决方案如下：

1.将canvas层级调整到最低层，即在其他元素之下。

2.在调用canvasToTempFilePath方法时，需要传入第二个参数，即canvas所在的组件实例this，例如：

// 获取canvas所在的组件实例
const query = uni.createSelectorQuery().in(this);
query.select('#myCanvas').fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    // 将canvas转化为图片
    uni.canvasToTempFilePath({
      canvas,
      // 传入组件实例this
      fileType: 'png',
      quality: 1,
      success: (res) => {
        console.log(res.tempFilePath);
      },
      fail: (err) => {
        console.log(err);
      }
    }, this);
  });

3.如果以上两种方法都无法解决问题，可以尝试将canvas转化为base64格式的图片，然后再进行保存或上传等操作。具体代码如下：

// 获取canvas所在的组件实例
const query = uni.createSelectorQuery().in(this);
query.select('#myCanvas').fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    // 将canvas转化为base64格式的图片
    const base64 = canvas.toDataURL('image/png');
    // 将base64格式的图片转化为文件对象
    const file = this.dataURLtoFile(base64, 'test.png');
    // 进行保存或上传等操作
    console.log(file);
  });