node.js - 使用 jimp 将项目推送到数组时出现“意外的文件结尾”

Question

我正在尝试将多个图像叠加到一张图像上。它在一定程度上有效，但它没有按照我想要的方式工作。

global.images = [];

fs.readdirSync('./images').forEach(function(file) {
    images.push(file);

    if (debug) {
        console.log(chalk.green('[Debug] Pushed ' + chalk.blue(file) + ' to the array.'));
    }
});
executeEdit(images);

function executeEdit(list) {
    var jimps = [];
    var x = 0;

    for (var i = 0; i < images.length; i++) {
        x = x + 150;

        setTimeout((function(i) {
            return function() {
                jimps.push(jimp.read('images/' + images[i]));
            }
        })(i), 10 * x);
    }

这段代码抛出一个错误: ( Node :15352)UnhandledPromiseRejectionWarning:错误:文件意外结束
在 Inflate.zlibOnError (zlib.js:153:15)
在 Inflate._processChunk (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:110:28)
在 zlibBufferSync (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:151:17)
在 inflateSync (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:155:10)
在 module.exports (D:\ImageTest\node_modules\pngjs\lib\parser-sync.js:79:20)
在 Object.exports.read [作为图像/png] (D:\ImageTest\node_modules\pngjs\lib\png-sync.js:10:10)
在 Jimp.parseBitmap (D:\ImageTest\node_modules\@jimp\core\dist\utils\image-bitmap.js:117:53)
在 Jimp.parseBitmap (D:\ImageTest\node_modules\@jimp\core\dist\index.js:498:32)
在 D:\ImageTest\node_modules\@jimp\core\dist\index.js:440:15
在 FSReqWrap.readFileAfterClose [作为未完成] (fs.js:511:3)
( Node :15352)UnhandledPromiseRejectionWarning:未处理的 promise 拒绝。此错误的根源是在没有 catch block 的情况下抛出异步函数内部，或者拒绝未使用 .catch() 处理的 Promise。 (拒绝ID:1)

我不知道为什么。这可能是由于从目录中读取并将其添加到数组中，就像执行 var images = ['file.png', 'file2.png' ] 工作正常一样。

如果有人对如何修复有任何想法，请告诉我。

谢谢!

编辑:这样做是有效的，但它只选择最后一张图像，而不选择任何其他图像:/

for (var i = 0; i < images.length; i++) {
        x = x + 150;
        // console.log(i);

        var image = {
            _integer: i,
            _image: images[i],
            func: function() {
                jimps.push(jimp.read('images/' + this._image));
                // console.log(this._integer);
            }
        }

        setTimeout(function() {image.func()}, x);
    }

Answer 1

提示是消息UnhandledPromiseRejectionWarning:您忽略了jimp实际上是异步的(回调或 promise )这一事实。在您的情况下，由于没有回调传递给 jimp.read() 它假设使用了 promise ，但您没有正确使用它们。

如果将 //console.log(this._integer); 替换为 console.log(jimps)，您将看到如下内容:

[ Promise { <pending> } ]
[ Promise { <Jimp 32x32> }, Promise { <pending> } ]
.... 

我根本不知道你在用jimps数组做什么(也不知道为什么你在这里使用setTimeout())，但你也许可以做这样的事情(如果通过删除一些日志和删除setTimeout()东西来简化一点)。现在这是正确的 promise 代码。

var fs = require('fs');
var jimp = require('jimp');

const images = [];
fs.readdirSync('./images').forEach(function(file) {
    images.push(file);
    console.log('[Debug] Pushed', file, ' to the array');
});

executeEdit(images);
console.log('waiting for executeEdit() to terminate');

function executeEdit(list) {
  let jimp_read_promises = []

  for (var i = 0; i < images.length; i++) {
      jimp_read_promises.push( jimp.read('images/' + images[i]))
  }

  Promise.all(jimp_read_promises).then( loadedimgs => {
    loadedimgs.map( img => {
      console.log( img )
    })
  })
}

所以这将打印以下内容

[Debug] Pushed 7035a55d06033e435be112c0969b1820.png  to the array
[Debug] Pushed aa5ef861d490a11fe20806e83c6dc64b.png  to the array
[Debug] Pushed crayon.png  to the array
waiting for executeEdit() to terminate
<Jimp 32x32>
<Jimp 48x48>
<Jimp 256x256>

因此，这 3 个文件(在我的例子中)被同步读取，然后调用executeEdit()。我们构建一个 Promise 对象数组，然后调用 Promise.all() ，它将等待所有 Promise 都得到解决。值 loadedimgs 是一个数组，其中包含每个 Promise 的结果(与 Promise 的顺序相同)。然后，您可以根据需要循环遍历该数组(这里我使用了 map 调用，但 for 循环也可以。

我希望这会有所帮助。