Question

我陷入了尝试获取base64图像的imageData的问题。我有2个函数，问题是第二个函数在第一个函数结束之前开始。

我有2个功能

frame.restoreImageDataForLayers();
frame.changeResultLayer();

首先-在页面上加载图像，然后将变量“ layers.data”更改为该加载图像的imageData。第二-使用image的imageData。

restoreImageDataForLayers() {
    this.layers.forEach((item) => {
      const layer = item;
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const image = new Image();
      image.onload = function drawImg() {
        context.drawImage(image, 0, 0);
        layer.data = context.getImageData(0, 0, layer.canvasSize, layer.canvasSize).data;
console.log('FIRST', layers.data');
      };
      image.src = layer.data;

    });
  }

changeResultLayer() {
    console.log('SECOND', this.layers[0].data);
  }

然后我有之前的第二个控制台日志第一个控制台日志和我的另一个必须与imageData一起使用的代码-崩溃。该如何解决？

Answer 1

您将需要将restoreImageDataForLayers转换为一个返回诺言的函数，该诺言仅在函数中的操作完成时才会解析。

restoreImageDataForLayers() {
  const layerPromises = this.layers.map(item => {
    return new Promise((resolve, reject) => {

      // All your canvas-image code here...

      image.onload = function(){

        // Your onload code here

        // Then resolve the promise for this item
        resolve()
      }
    })
  })

  return Promise.all(layerPromises)
}

为此，您需要将图像加载过程包装在Promise中。使用array.map()创建一个由这些诺言组成的数组，每个诺言一个。然后使用Promise.all()创建一个仅在数组中的所有promise解析后才解析的promise。

要调用此函数，只需执行以下操作：

frame.restoreImageDataForLayers().then(() => {
  frame.changeResultLayer();
});

或者，如果调用方在async函数中，请执行以下操作：

async thatWrapperFunction(){
  await frame.restoreImageDataForLayers();
  frame.changeResultLayer();
}

仅在上一个完成后如何调用函数

1 个答案: