Drop image here.

What is this?

Resemble.js analyses and compares images with HTML5 canvas and JavaScript.

Try it for yourself.

Drop first image
Drop second image

Compare two images?

Drop two images on the boxes to the left. The box below will show a generated 'diff' image, pink areas show mismatch. This example best works with two very similar but slightly different images. Try for yourself!

Don't have any images to compare?



Diff will appear here.













Why?

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.


View project on GitHub

How can I use it?

Retrieve basic analysis on image.

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

Use resemble to compare two images.

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

Take a look at the JavaScript for this demo page from a better example