Xtykutl

i'm trying to overlay multiple images onto one single image. it works to an extent, but it isn't working how i want it to.

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);

    }

this code throws an error of:
(node:15352) UnhandledPromiseRejectionWarning: Error: unexpected end of file
at Inflate.zlibOnError (zlib.js:153:15)
at Inflate._processChunk (D:ImageTestnode_modulespngjslibsync-inflate.js:110:28)
at zlibBufferSync (D:ImageTestnode_modulespngjslibsync-inflate.js:151:17)
at inflateSync (D:ImageTestnode_modulespngjslibsync-inflate.js:155:10)
at module.exports (D:ImageTestnode_modulespngjslibparser-sync.js:79:20)
at Object.exports.read [as image/png] (D:ImageTestnode_modulespngjslibpng-sync.js:10:10)
at Jimp.parseBitmap (D:ImageTestnode_modules@jimpcoredistutilsimage-bitmap.js:117:53)
at Jimp.parseBitmap (D:ImageTestnode_modules@jimpcoredistindex.js:498:32)
at D:ImageTestnode_modules@jimpcoredistindex.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)

and i have no idea why. it may be due to reading from the directory and adding it to an array as just doing var images = ['file.png', 'file2.png' ] works fine.

if anyone has any ideas on how to fix, please let me know.

thanks!

edit:
doing this works, but it only chooses the last image and not any others :/

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);

    }

The hint is the message UnhandledPromiseRejectionWarning: you are missing the fact that jimp is actually asynchronous (either callbacks or promises). In your case, since there is no callback passed to jimp.read() it assumes promises are used but you are not using them correctly.

If you replace // console.log(this._integer); by console.log(jimps), you will see something like this:

[ Promise { <pending> } ]

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

.... 

I am not sure what you are doing with the jimps array at all (nor why you are using a setTimeout() here), but you can perhaps do something like this (if have simplified a bit by removing some logs and removing the setTimeout() stuff). This is now proper promise code.

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 )

    })

  })

}

So this would print the following

[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>

So the 3 files (in my case) are read synchronously then executeEdit() is called. We build an array of promise objects then call Promise.all() which will wait till all promises are resolved. The value loadedimgs is an array with the result of each promise (in the same order as the promises). You can then loop over that array as you see fit (here I used a map call but a for loop will do.

I hope this helps.