如何讓 node.js 程序等待 PNG 解析？

Question

我正在編寫一個項目，該項目需要我加載大量低分辨率 PNG（~10k）來訓練我的神經網絡。 這是我的代碼

注意：這個項目使用 'pngjs' 模塊

for(var i = 0;i < 100;i++){
var input_dir = dirs[i];
console.log('file number: ', i);
fs.createReadStream(input_dir).pipe(new PNG({
          filterType: 4,}))
        .on("parsed", function(){
          console.log(input_dir);
          for(var y = 0; y < this.height; y++) {
            for (var x = 0; x < this.width; x++) {
              var idx = (this.width * y + x) << 2;
              // invert color
              this.data[idx] = 255 - this.data[idx];
              this.data[idx + 1] = 255 - this.data[idx + 1];
              this.data[idx + 2] = 255 - this.data[idx + 2];
              var sum = this.data[idx]+this.data[idx + 1]+this.data[idx + 2];
              sum /= 3;
              arr.push(sum);
            }
          }
          console.log(arr);
        });
}

執行后，我大量的file number:在終端中，之后所有圖像都顯示出來。 有什么方法可以讓程序等待圖像解析？

Answer 1

createReadStream 將在您每次調用它時異步運行，您可以將它包裝在返回 promise 的 function 中，然后使用 ZA5A3F0F287A448982AAC520CFFE4779 等待這些承諾中的每一個。

function readStreamPromise(input_dir){
    return new Promise((resolve) => {
        fs.createReadStream(input_dir)
             .pipe(new PNG({filterType: 4,}))
             .on("parsed", () => {
                 // do parsing logic
                  resolve()
             });
        }
    }

然后做類似的事情

await Promise.all(dirs.map((inputDir) => {
    return readStreamPromise(inputDir)
})

當然，如果您使用等待，這將需要在異步 function 內

Answer 2

我想你想在繼續之前等待它的加載階段。 幸運的是，有一個關鍵字； 即await 。 它必須與async配對。 一探究竟。

編輯：一般的想法是你會做一個所謂的承諾數組（與異步和等待有關）； 每個圖像一個 Promise。 然后，您可以等待所有這些異步 Promise 的完成，即當所有圖像都加載完畢時。 之后，您可以做您想做的事，同時仍然預先異步加載所有圖像。 （提示：Promise.all）