如何将HTML5 <canvas>图像转换为可在drawImage中使用的Bitmap？

你遇到的核心问题是：createImageBitmap() 是异步函数，它返回的是一个Promise对象，而非直接的Bitmap实例，所以直接用ctx.drawImage(tmp, 0, 0)会报错提示tmp不是bitmap。

正确的异步处理方式 #

方式1：使用async/await（代码更简洁，推荐）

async function saveAndResizeCanvas(canvas, newSize) {
  // 异步获取真正的Bitmap实例
  const bitmap = await createImageBitmap(canvas);
  
  // 将Canvas修改为目标正方形尺寸
  canvas.width = newSize;
  canvas.height = newSize;
  const ctx = canvas.getContext('2d');
  
  // 绘制Bitmap并缩放适配新尺寸
  ctx.drawImage(bitmap, 0, 0, newSize, newSize);
  
  // 用完Bitmap后释放内存，避免泄漏
  bitmap.close();
}

// 调用示例：把目标Canvas调整为500x500的正方形
saveAndResizeCanvas(yourCanvasElement, 500);

方式2：使用.then()回调（兼容不支持async/await的环境）

function saveAndResizeCanvas(canvas, newSize) {
  createImageBitmap(canvas)
    .then(bitmap => {
      canvas.width = newSize;
      canvas.height = newSize;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(bitmap, 0, 0, newSize, newSize);
      bitmap.close();
    })
    .catch(err => {
      console.error('创建Bitmap失败:', err);
    });
}

// 调用示例
saveAndResizeCanvas(yourCanvasElement, 500);

额外补充 #

• createImageBitmap() 支持直接传入Canvas元素，生成的Bitmap可高效用于后续绘制操作
• 如果不需要Bitmap，也可以用临时Canvas中转实现尺寸调整（更轻量化的方案）：

function resizeCanvas(canvas, newSize) {
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  tempCtx.drawImage(canvas, 0, 0);
  
  // 调整原Canvas尺寸并绘制临时Canvas内容
  canvas.width = newSize;
  canvas.height = newSize;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(tempCanvas, 0, 0, newSize, newSize);
}

内容的提问来源于stack exchange，提问作者Link