diff --git a/README.md b/README.md
index d3f5e92..62e1041 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,8 @@ Resemble.js
Analyse and compare images with Javascript and HTML5. [Resemble.js Demo](http://huddle.github.com/Resemble.js/)
+![Two image diff examples side-by-side, one pink, one yellow.](https://raw.github.com/Huddle/Resemble.js/master/demoassets/readmeimage.jpg "Visual image comparison")
+
### Get it
`npm install resemblejs`
@@ -51,6 +53,21 @@ You can also change the comparison method after the first analysis.
diff.ignoreAntialiasing();
```
+And change the output display style.
+
+```javascript
+resemble.outputSettings({
+ errorColor: {
+ red: 255,
+ green: 0,
+ blue: 255
+ },
+ errorType: 'movement',
+ transparency: 0.3
+});
+// resembleControl.repaint();
+```
+
--------------------------------------
Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.
\ No newline at end of file
diff --git a/demoassets/People.jpg b/demoassets/People.jpg
index a891a9e..9408d78 100644
Binary files a/demoassets/People.jpg and b/demoassets/People.jpg differ
diff --git a/demoassets/People2.jpg b/demoassets/People2.jpg
index d55e303..e26ed3c 100644
Binary files a/demoassets/People2.jpg and b/demoassets/People2.jpg differ
diff --git a/demoassets/main.js b/demoassets/main.js
index 14d49a4..a3371c9 100644
--- a/demoassets/main.js
+++ b/demoassets/main.js
@@ -60,7 +60,7 @@ $(function(){
window.open(diffImage.src, '_blank');
});
- $('#buttons').show();
+ $('.buttons').show();
if(data.misMatchPercentage == 0){
$('#thesame').show();
@@ -80,13 +80,14 @@ $(function(){
var file1;
var file2;
var resembleControl;
+
dropZone($('#dropzone1'), function(file){
- console.log(file);
file1 = file;
if(file2){
resembleControl = resemble(file).compareTo(file2).onComplete(onComplete);
}
});
+
dropZone($('#dropzone2'), function(file){
file2 = file;
if(file1){
@@ -94,13 +95,12 @@ $(function(){
}
});
-
- var buttons = $('#raw, #colors, #antialising');
+ var buttons = $('.buttons button');
buttons.click(function(){
var $this = $(this);
- buttons.removeClass('active');
+ $this.parent('.buttons').find('button').removeClass('active');
$this.addClass('active');
if($this.is('#raw')){
@@ -114,9 +114,58 @@ $(function(){
if($this.is('#antialising')){
resembleControl.ignoreAntialiasing();
}
+ else
+ if($this.is('#pink')){
+ resemble.outputSettings({
+ errorColor: {
+ red: 255,
+ green: 0,
+ blue: 255
+ }
+ });
+ resembleControl.repaint();
+ }
+ else
+ if($this.is('#yellow')){
+ resemble.outputSettings({
+ errorColor: {
+ red: 255,
+ green: 255,
+ blue: 0
+ }
+ });
+ resembleControl.repaint();
+ }
+ else
+ if($this.is('#flat')){
+ resemble.outputSettings({
+ errorType: 'flat'
+ });
+ resembleControl.repaint();
+ }
+ else
+ if($this.is('#movement')){
+ resemble.outputSettings({
+ errorType: 'movement'
+ });
+ resembleControl.repaint();
+ }
+ else
+ if($this.is('#opaque')){
+ resemble.outputSettings({
+ transparency: 1
+ });
+ resembleControl.repaint();
+ }
+ else
+ if($this.is('#transparent')){
+ resemble.outputSettings({
+ transparency: 0.3
+ });
+ resembleControl.repaint();
+ }
});
-
(function(){
var xhr = new XMLHttpRequest();
var xhr2 = new XMLHttpRequest();
diff --git a/demoassets/readmeimage.jpg b/demoassets/readmeimage.jpg
new file mode 100644
index 0000000..674c235
Binary files /dev/null and b/demoassets/readmeimage.jpg differ
diff --git a/index.html b/index.html
index 39563c3..99408a2 100644
--- a/index.html
+++ b/index.html
@@ -84,11 +84,31 @@
Diff will appear here.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index e88180d..206a03d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "resemblejs",
- "version": "1.0.1",
+ "version": "1.1.0",
"description": "Image analysis and comparison with HTML5",
"main": "resemble.js",
"repository": {
diff --git a/resemble.js b/resemble.js
index 7adb337..d82bd4e 100644
--- a/resemble.js
+++ b/resemble.js
@@ -1,13 +1,41 @@
/*
-Author: James Cryer
-Company: Huddle
-Last updated date: 17 Sep 2013
+James Cryer / Huddle 2014
URL: https://github.com/Huddle/Resemble.js
*/
(function(_this){
'use strict';
+ var pixelTransparency = 1;
+
+ var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
+ red: 255,
+ green: 0,
+ blue: 255,
+ alpha: 255
+ };
+
+ var errorPixelTransform = {
+ flat : function (d1, d2){
+ return {
+ r: errorPixelColor.red,
+ g: errorPixelColor.green,
+ b: errorPixelColor.blue,
+ a: errorPixelColor.alpha
+ }
+ },
+ movement: function (d1, d2){
+ return {
+ r: ((d2.r*(errorPixelColor.red/255)) + errorPixelColor.red)/2,
+ g: ((d2.g*(errorPixelColor.green/255)) + errorPixelColor.green)/2,
+ b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
+ a: d2.a
+ }
+ }
+ };
+
+ var errorPixelTransformer = errorPixelTransform.flat;
+
_this['resemble'] = function( fileData ){
var data = {};
@@ -242,28 +270,28 @@ URL: https://github.com/Huddle/Resemble.js
return false;
}
- function errorPixel(px, offset){
- px[offset] = 255; //r
- px[offset + 1] = 0; //g
- px[offset + 2] = 255; //b
- px[offset + 3] = 255; //a
+ function errorPixel(px, offset, data1, data2){
+ var data = errorPixelTransformer(data1, data2);
+ px[offset] = data.r;
+ px[offset + 1] = data.g;
+ px[offset + 2] = data.b;
+ px[offset + 3] = data.a;
}
function copyPixel(px, offset, data){
px[offset] = data.r; //r
px[offset + 1] = data.g; //g
px[offset + 2] = data.b; //b
- px[offset + 3] = data.a; //a
+ px[offset + 3] = data.a * pixelTransparency; //a
}
function copyGrayScalePixel(px, offset, data){
px[offset] = data.brightness; //r
px[offset + 1] = data.brightness; //g
px[offset + 2] = data.brightness; //b
- px[offset + 3] = data.a; //a
+ px[offset + 3] = data.a * pixelTransparency; //a
}
-
function getPixelInfo(data, offset, cacheSet){
var r;
var g;
@@ -346,14 +374,14 @@ URL: https://github.com/Huddle/Resemble.js
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
- errorPixel(targetPix, offset);
+ errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
}
return;
}
if( isRGBSimilar(pixel1, pixel2) ){
- copyPixel(targetPix, offset, pixel2);
+ copyPixel(targetPix, offset, pixel1, pixel2);
} else if( ignoreAntialiasing && (
addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
@@ -365,11 +393,11 @@ URL: https://github.com/Huddle/Resemble.js
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
- errorPixel(targetPix, offset);
+ errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
}
} else {
- errorPixel(targetPix, offset);
+ errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
}
@@ -515,6 +543,10 @@ URL: https://github.com/Huddle/Resemble.js
if(hasMethod) { param(); }
return self;
},
+ repaint: function(){
+ if(hasMethod) { param(); }
+ return self;
+ },
onComplete: function( callback ){
updateCallbackArray.push(callback);
@@ -545,4 +577,24 @@ URL: https://github.com/Huddle/Resemble.js
};
};
+
+ _this['resemble'].outputSettings = function(options){
+ var key;
+ var undefined;
+
+ if(options.errorColor){
+ for (key in options.errorColor) {
+ errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
+ }
+ }
+
+ if(options.errorType && errorPixelTransform[options.errorType] ){
+ errorPixelTransformer = errorPixelTransform[options.errorType];
+ }
+
+ pixelTransparency = options.transparency || pixelTransparency;
+
+ return this;
+ };
+
}(this));
\ No newline at end of file