getImageData/putImageData未绘制预期输出

Question

我有一个变量，它通过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);
}

​

​

Answer 1

罪魁祸首是drawPicture函数中的drawPicture处理程序。仅仅使用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);
}