Javascript 如何将默认图像设置为画布？

我有一个PNG图像（在我的数据库中），我想将它加载到画布中的页面中。我不知道怎么做。我不知道如何将图像加载为ImageBitmap或任何与canvas兼容的内容。如何将字节赋给canvas并告诉它正在使用png格式/将mime设置为png？

HTML

---

这是最简单的方法。

drawImage（）

方法可以获取多个图像源，而不仅仅是一个HTML图像元素。例如，您不需要像我演示的那样将图像放入DOM中。我建议您阅读文档：

我将其分为两部分：（1）您希望将图像加载到ImageBitmap可以使用的内容中，以及（2）您希望创建ImageBitmap以将其放入画布中

这可能看起来像这样：

const fileName = 'resources/image.png';
const fetched = await fetch(fileName); // Retrieve an image file.
const blob = await fetched.blob(); // Get a blob to represent this image.

const imageBitmap = await createImageBitmap(blob); // Create an imageBitmap from this blob.
const canvas = document.getElementById('canvas'); // Make sure your HTML contains a <canvas> element.
const context = canvas.getContext('2d');

context.drawImage(imageBitmap, 0,0); // Draw this image onto the canvas.

constfilename='resources/image.png'；
const fetched=等待获取（文件名）；//检索图像文件。
const blob=wait fetched.blob（）；//获取一个blob来表示此图像。
const imageBitmap=wait createImageBitmap（blob）；//从该blob创建一个imageBitmap。
const canvas=document.getElementById（'canvas'）；//确保您的HTML包含一个元素。
const context=canvas.getContext（'2d'）；
context.drawImage（图像位图，0,0）；//将此图像绘制到画布上。

奇怪。我得到了错误“试图使用一个不可用或不再可用的对象”，但我认为这是正确的解决方案

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img, 0, 0);

const fileName = 'resources/image.png';
const fetched = await fetch(fileName); // Retrieve an image file.
const blob = await fetched.blob(); // Get a blob to represent this image.

const imageBitmap = await createImageBitmap(blob); // Create an imageBitmap from this blob.
const canvas = document.getElementById('canvas'); // Make sure your HTML contains a <canvas> element.
const context = canvas.getContext('2d');

context.drawImage(imageBitmap, 0,0); // Draw this image onto the canvas.