javascript - 在 for 循环中等待 image.onload

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.

标签： javascriptfor-looppromiseasync-await