node-resemble.js's Introduction

node-resemble.js

Analyse and compare images with Javascript. This project does not need canvas or any other binary denpendencies. It is a modification of Resemble.js

Get it

npm install node-resemble-js

Example

Retrieve basic analysis on image.

var api = resemble(fileData).onComplete(function(data){
	console.log(data);
	/*
	{
	  red: 255,
	  green: 255,
	  blue: 255,
	  brightness: 255
	}
	*/
});

Use resemble to compare two images.

var diff = resemble(file).compareTo(file2).ignoreColors().onComplete(function(data){
	console.log(data);
	/*
	{
	  misMatchPercentage : 100, // %
	  isSameDimensions: true, // or false
	  dimensionDifference: { width: 0, height: -1 }, // defined if dimensions are not the same
	  getImageDataUrl: function(){}
	}
	*/
});

You can also change the comparison method after the first analysis.

// diff.ignoreNothing();
// diff.ignoreColors();
diff.ignoreAntialiasing();

And change the output display style.

resemble.outputSettings({
  errorColor: {
    red: 255,
    green: 0,
    blue: 255
  },
  errorType: 'movement',
  transparency: 0.3
});
// resembleControl.repaint();

Example usuage (in cucumber step definition)

 this.Then(/^Screenshot should match image "(.*)"$/, function (image, callback) {
    browser.takeScreenshot().then(function(pngString) {
      var screenshot = new Buffer(pngString, 'base64');
 
      resemble(image)
        .compareTo(screenshot)
        .onComplete(function(data){
 
          if (Number(data.misMatchPercentage) <= 0.01) {
            callback();
          } else {
            data.getDiffImage().pack().pipe(fs.createWriteStream(image + 'diff.png'));
            callback.fail(new Error("Screenshot '" + image+  "' differ " + data.misMatchPercentage + "%"));
          }
        });
    });
  })

Credits: