等待image.onload在for循环中

Question

我正在尝试将base64编码的PNG数组（通过require()导入文件资产导入）转换为RGBA数组。我使用的方法是将base64字符串写入图像元素，然后在图像的上下文中从getImageData()读取数据。

但是，image.onload事件侦听器与Promises和for循环之间的交互使我感到困惑。

      async function afterImageLoad(src) {
        return new Promise((resolve, reject) => {
          const signCanvas = document.createElement('canvas');
          const signContext = signCanvas.getContext("2d")
          const signImage = new Image(108, 108);

          signImage.onload = async () => {
            signImage.decode().then(() => {
              resolve(signContext.getImageData(0, 0, 108, 108));
            })
          }
          signImage.src = src;
        })
      }

      for (let i = 0; i < this.table.length; i++) {

        let signImageSrc = this.table[i].imageURL; // The base64 string
        let signImageData = await afterImageLoad(signImageSrc) // I want the for-loop to pause here

        let diff = pixelmatch(
            drawingPixelData.data,
            signImageData.data,
            diffContext.data,
            108,
            108,
        ); // right now this is always 0, because the signImageData is not loaded.