Resemble.js, by James Cryer is a small (~11kb) JavaScript library that helps you analyze and compare images in the browser. The only ‘requirements’ are the HTML5 File API (for parsing data) and the HTML5 Canvas (for rendering diffs).

You can analyze a single image:

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

or compare two images:

resemble(file).compareTo(file2).onComplete(function(){
  return data;
  /* { misMatchPercentage : 100, isSameDimensions: true, getImageDataUrl: function(){} } */
});

View a demo or the source on GitHub.


Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.