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 right. 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!

Diff will appear here.



How does it work?

Dark magic.


View project on Github

How can I use it?

Invoke Resemble on an image or canvas image to extract data

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

Use resemble to compare two image

resemble(file).compareTo(file2).onComplete(function(){
	return data;
});
/*
{
	misMatchPercentage : 100, // %
	isSameDimensions: true, // or false
	imageDiffFileData: {} // dataUrl of image as png
}
*/