compare .gif image giving error Cannot read property 'width' of null

[KaranbeerKaur]

If I compare .png images my code is working fine. But If I compare .gif images it gives below error

TypeError: Cannot read property 'width' of null
at /Users/karanbeer.kaur/node_modules/node-resemble-js/resemble.js:120:26
at . (/Users/xyz/node_modules/pngjs/lib/png.js:80:7)
at g (events.js:286:16)
at emitOne (events.js:96:13)
at emit (events.js:188:7)
at emitOne (events.js:96:13)
at emit (events.js:188:7)
at ParserAsync._handleError (/Users/xyz/node_modules/pngjs/lib/parser-async.js:34:8)
at Parser._parseSignature (/Users/xyz/node_modules/pngjs/lib/parser.js:51:12)
at ChunkStream._processRead (/Users/xyz/node_modules/pngjs/lib/chunkstream.js:174:13)

Kindly help how i can resolve this issue.
If .gif format is not supported by node-resemeble.js then please mention list of supported image formats in readme.md.

[mirzazeyrek]

I don't think comparing gif images would be possible or even needed.

Also please kindly explain what kind of output do you expect when comparing animated gifs?

[KaranbeerKaur]

when I am comparing attached images on this(https://huddle.github.io/Resemble.js/) link it is showing me output image, same I want from code to give output image

[KaranbeerKaur]

Is this works only for PNG files? I am giving .jpg image for compare. Still getting same error.

Cannot read property 'width' of null
    at /Users/karanbeer.kaur/node_modules/node-resemble-js/resemble.js:120:26

[mirzazeyrek]

Could you please share the images and your code ?

[KaranbeerKaur]

Hi,

I have shared code and images. please let me know, what changes I need to make.
I have given Images https://github.com/lksv/node-resemble.js/blob/master/example/People2.jpg
https://github.com/lksv/node-resemble.js/blob/master/example/People.jpg these images also still getting same error

var express = require('express');
var fs = require('fs');
var resemble = require('node-resemble-js');
resemble.outputSettings({
              errorColor: {
                red: 0,
                green: 0,
                blue: 255
             },
            errorType: 'flat',
            transparency: 1,
            largeImageThreshold: 1200
           

});

var compareImages = function (filePath1,filePath2,res) {
    var fileData1 = fs.readFileSync(filePath1);
    var fileData2 = fs.readFileSync(filePath2);

    var diff = resemble(fileData1).compareTo(fileData2).onComplete(function(data){
            var df = "/xyz/diff.jpg";
           console.log("%="+ data.misMatchPercentage);
           var image = data.getDiffImage();
           //var jpg = data.getDiffImageAsJPEG()
            var buf = new Buffer([])
            var strm = image.pack()
            strm.on('data', function (dat) {
              buf = Buffer.concat([buf, dat])
            })
            strm.on('end', function() {
              fs.writeFile(df, buf, null, function (err) {
                if (err) {
                 throw 'error writing file: ' + err;
                }
                console.log('file written');
                res.sendFile(df)
              })
            })
        });
      console.log("diff="+JSON.stringify(diff)); 
   
};

[KaranbeerKaur]

Please update, waiting for reply

[sdkevorkian]

Hi,
I am having this same issue,
TypeError: Cannot read property 'width' of null

trying to compare two .jpg files. I am learning still and experimenting. here is the code I have:

app.get('/test2', function(req, res) {
    var fileData1 = fs.readFileSync('spaniel.jpg');
    var fileData2 = fs.readFileSync('me.jpg');
    resemble(fileData1).compareTo(fileData2)
        //.ignoreAntialiasing()
        //.ignoreColors()
        .onComplete(function(data) {
            res.send(data);
        });
});

[omonk]

@sdkevorkian I've found this issue thats been closed, bit late I know but it appears that when using a jpg you can get add the 'path/to/file' route as a string. See issue here along with commit