Writing buffer response from resemble.js to file

Question

I'm using node-resemble-js to compare two PNG images.

The comparison happens without issue and I get a successful/relevant response however I'm having trouble outputting the image diff.

var express = require('express');
var fs = require('fs');
var resemble = require('node-resemble-js');
var router = express.Router();

router.get('/compare', function(req, res, next) {
    compareImages(res);
});

var compareImages = function (res) {
    resemble.outputSettings({
        largeImageThreshold: 0
    });
    var diff = resemble('1.png')
        .compareTo('2.png')
        .ignoreColors()
        .onComplete(function(data){
            console.log(data);
            var png = data.getDiffImage();
            fs.writeFile('diff.png', png.data, null, function (err) {
                if (err) {
                    throw 'error writing file: ' + err;
                }
                console.log('file written');
            });
            res.render('compare');
        });
};

module.exports = router;

It writes to diff.png as expected however it's not creating a valid image.

Any ideas where I'm going wrong? Feel like I'm pretty close but just unsure of final piece.

Thanks

show us the complete code – user2524973 Feb 26 '15 at 16:42 — user2524973, Feb 26 '15 at 16:42
updated to include complete code – timothyclifford Feb 26 '15 at 17:20 — timothyclifford, Feb 26 '15 at 17:20

score 3 · Accepted Answer · answered Feb 26 '15 at 20:43

Looks like there is a pack() method that needs to be called, which does some work and then streamifies the data. In that case you can buffer the stream and then call writeFile like this:

        var png = data.getDiffImage();
        var buf = new Buffer([])
        var strm = png.pack()
        strm.on('data', function (dat) {
          buf = Buffer.concat([buf, dat])
        })
        strm.on('end', function() {
          fs.writeFile('diff.png', buf, null, function (err) {
            if (err) {
             throw 'error writing file: ' + err;
            }
            console.log('file written');
          })
        })

or you can just pipe it like this, which is a little simpler:

png.pack().pipe(fs.createWriteStream('diff.png'))

Honestly, your approach made sense to me (grab the Buffer and write it) but I guess that data Buffer attached to what comes back from getDiffImage isn't really the final png. Seems like the docs are a bit thin but there's some info here: https://github.com/lksv/node-resemble.js/issues/4

Writing buffer response from resemble.js to file

1 Answers1