+
86
-

回答

在uni-app中判断canvas画布是否为空,有以下几个方法:

const ctx = uni.createCanvasContext('canvasId')

// 方法1: 使用getImageData获取像素数据
function isCanvasEmpty() {
  return new Promise((resolve) => {
    // 获取画布数据
    const {width, height} = ctx
    const imageData = ctx.getImageData(0, 0, width, height)
    const data = imageData.data

    // 检查所有像素是否都是透明的
    let isEmpty = true
    for(let i = 3; i < data.length; i += 4) {
      if(data[i] !== 0) {
        isEmpty = false
        break
      }
    }
    resolve(isEmpty)
  })
}

// 方法2: 使用toTempFilePath保存图片判断大小
function checkCanvasEmpty() {
  return new Promise((resolve) => {
    uni.canvasToTempFilePath({
      canvasId: 'canvasId',
      success: (res) => {
        // 获取临时文件信息
        uni.getFileInfo({
          filePath: res.tempFilePath,
          success: (info) => {
            // 如果文件大小小于特定值(如1KB)则认为是空白
            resolve(info.size < 1024)
          }
        })
      }
    })
  })
}

// 方法3: 记录绘制状态
let hasDrawnContent = false

ctx.draw = function() {
  hasDrawnContent = true
  // 原draw方法
}

function isCanvasEmpty() {
  return !hasDrawnContent
}

主要思路有:

获取画布像素数据,检查是否都是透明的保存为临时文件检查大小通过标志位记录是否执行过绘制操作

建议根据实际场景选择合适的方法,方法1最准确但性能消耗较大,方法2和3实现简单但可能有特殊情况无法覆盖。

网友回复

我知道答案,我要回答