Image analysis and comparison

Resemble.js analyses and compares images with HTML5 canvas and JavaScript. Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. However, it has been designed and built for use by the PhantomJS powered visual regression library PhantomCSS. PhantomCSS needs to be able to ignore antialiasing as this would cause differences between screenshots derived from different machines.

Resemble.js uses the HTML5 File API to parse image data, and canvas for rendering image diffs.

Get it

npm install resemblejs

bower install resemblejs

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,
  largeImageThreshold: 1200
});
// resembleControl.repaint();

By default, the comparison algorithm skips pixels when the image width or height is larger than 1200 pixels. This is there to mitigate performance issues.

You can switch this modify this behaviour by setting the largeImageThreshold option to a different value. Set it to 0 to switch it off completely.