Andrew Thorp changelog.com/posts

Analyze and compare images in the browser with Resemble.js

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.


Discussion

Sign in or Join to comment or subscribe

Player art
  0:00 / 0:00