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: Error: unexpected end of file at Inflate.zlibOnError (zlib.js:153:15) at Inflate._processChunk (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:110:28) at zlibBufferSync (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:151:17) at inflateSync (D:\ImageTest\node_modules\pngjs\lib\sync-inflate.js:155:10) at module.exports (D:\ImageTest\node_modules\pngjs\lib\parser-sync.js:79:20) at Object.exports.read [as image/png] (D:\ImageTest\node_modules\pngjs\lib\png-sync.js:10:10) at Jimp.parseBitmap (D:\ImageTest\node_modules\@jimp\core\dist\utils\image-bitmap.js:117:53) at Jimp.parseBitmap (D:\ImageTest\node_modules\@jimp\core\dist\index.js:498:32) at D:\ImageTest\node_modules\@jimp\core\dist\index.js:440:15 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3) (node:15352) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection 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()的回调，因此假定已使用了诺言，但您没有正确使用它们。

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

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

我完全不确定您对jimps数组所做的操作（也不知道为什么在这里使用setTimeout()），但是您也许可以做类似的事情（如果有所简化）通过删除一些日志并删除setTimeout()东西）。现在，这是正确的承诺代码。

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是一个数组，其中包含每个诺言的结果（与诺言的顺序相同）。然后，您可以根据需要循环遍历该数组（这里我使用了map调用，但是for循环可以完成。

我希望这会有所帮助。

“意外的文件末尾”，使用jimp将项目推入数组

1 个答案: