getImageData/putImageData 未绘制预期输出答案

【问题标题】：getImageData/putImageData not drawing expected outputgetImageData/putImageData 未绘制预期输出
【发布时间】：2022-01-05 05:26:24
【问题描述】：

我有这个变量，它通过getImageData() 保存画布的先前状态，但是当我在它上面绘制然后尝试使用putImageData() 恢复到旧状态时它不起作用：

window.onload = async () => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  let map;

  const drawPicture = async (image) => {
    const img = new Image();

    img.src = `assets/${image}.png`;
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 60, 60);
    }
  }

  await drawPicture('log');
  map = ctx.getImageData(0, 0, 60, 60);
  await drawPicture('box');
  await ctx.putImageData(map, 0, 0);
}

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

罪魁祸首是drawPicture 函数中的onload 处理程序。仅使用 async 前缀将函数标记为异步是不够的。在您的情况下，该函数应该等到图像加载完毕，然后立即将其绘制到画布上。

按现在的方式编写，onload 处理程序会在您上次调用函数后的某个时间触发：

await ctx.putImageData(map, 0, 0);

所以正确的方法是让函数返回一个Promise，它在onload 处理程序触发后立即执行。

window.onload = async () => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let map;

    const drawPicture = async (image) => {
        return new Promise(resolve => {
            const img = new Image();
            img.onload = () => {
                ctx.drawImage(img, 0, 0, 60, 60);
                resolve();
            }
            img.src = `assets/${image}.png`;
        });
    }

    await drawPicture('a');
    map = ctx.getImageData(0, 0, 60, 60);
    await drawPicture('b');
    await ctx.putImageData(map, 0, 0);
}

【讨论】：