JavaScript创建img元素并使用DataURI后绘制Canvas报错net::ERR_FILE_NOT_FOUND

我在JavaScript中创建了img元素，并将saveFrame()函数返回的有效DataURI设置为其src属性：

img = new document.createElement('img');
img.src = saveFrame();

执行console.log(img)时，img元素显示正常，但调用cctx.drawImage(img, x, y, cboard.width, cboard.height)绘制到canvas（画布名为cboard，上下文为cctx）时出现报错。

已尝试的解决方法 #

• 使用var声明：var img = document.createElement('img')
• 使用new Image()：img = new Image()

预期与实际结果 #

• 预期效果：图片成功绘制到canvas上
• 实际结果：
  • Firefox：控制台无输出，功能无法运行
  • Chromium：功能失效并抛出错误（错误截图：）

环境信息 #

操作系统：Manjaro Linux | Chromium版本：110.0.5481.177 | Firefox版本：110.0

解决方案 #

问题核心是图片未加载完成就调用了drawImage。即使是DataURI格式，Image元素也需要时间解析数据，直接同步执行绘制会导致图片未就绪，引发错误。

正确的做法是监听Image的load事件，等图片加载完成后再执行绘制：

const img = new Image();
img.src = saveFrame();
// 图片加载完成后执行绘制
img.onload = function() {
  cctx.drawImage(img, x, y, cboard.width, cboard.height);
};

// 可选：处理图片加载失败的情况
img.onerror = function() {
  console.error('图片加载失败，请检查DataURI是否有效');
};

说明 #

Image元素的load事件会在图片数据完全解析、可以正常绘制时触发。通过这个事件确保绘制操作在图片就绪后执行，就能避免浏览器抛出未就绪的错误，同时保证Firefox和Chromium下都能正常运行。

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