将 html5 <canvas> 图像转换为可在 drawImage 中使用的位图

【问题标题】：Convert html5 <canvas> image to bitmap usable in drawImage将 html5 <canvas> 图像转换为可在 drawImage 中使用的位图
【发布时间】：2022-11-27 01:19:40
【问题描述】：

我想将画布图像保存为位图，以便以后在 drawImage 中使用它。

目标是能够更改（例如调整大小）画布并保持其内容（例如缩放 - 画布始终是正方形）。

我试过了： var tmp = createImageBitmap(canvas) ctx.drawImage(tmp,0,0)

我得到的是一个错误，说“tmp”不是位图。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

createImageBitmap返回一个Promise，所以结果是异步的，你必须用await等待它：

const img = await createImageBitmap(canvas);
ctx.drawImage(img, 0, 0);

或者，如果你不能使用 await 因为你的目标是 ES5，那么用老式的方式来做：

createImageBitmap(canvas).then(img => {
    ctx.drawImage(img, 0, 0);
});

【讨论】：