getImageData/putImageData还原canvas状态未输出预期结果如何解决

问题原因 #

你自定义的drawPicture函数虽然标注了async，但内部图片加载是基于回调的异步逻辑，没有正确返回Promise对象，await drawPicture()并不会等待图片加载、绘制完成才执行后续代码，实际执行顺序完全错乱：

1. 调用drawPicture('log')设置图片src后，函数直接返回，await立刻结束
2. 立即执行getImageData保存画布，此时log图片还未加载完成，你保存的map是空白画布的数据
3. 调用drawPicture('box')后同样不等加载就执行putImageData，把空白画布数据盖到画布上
4. 最后才依次触发log、box的加载完成回调执行绘制，完全没有按你预期的顺序执行，自然看不到还原效果

修复方案 #

将drawPicture改造为正确返回Promise的异步函数，保证await能真实等待图片绘制完成：

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

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

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

额外注意事项 #

• putImageData本身是同步API，不需要加await修饰，原有写法里的await属于冗余代码
• 如果你的图片资源跨域，需要给Image实例设置img.crossOrigin = 'anonymous'，同时图片服务端配置正确的跨域响应头，否则会因为跨域污染画布，导致getImageData调用抛出异常

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