diff --git a/README.md b/README.md index c205757..6940d20 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ You can also change the comparison method after the first analysis: ```javascript // diff.ignoreNothing(); // diff.ignoreColors(); +// diff.ignoreAlpha(); diff.ignoreAntialiasing(); ``` diff --git a/demoassets/PeopleAlpha.png b/demoassets/PeopleAlpha.png new file mode 100644 index 0000000..c35d410 Binary files /dev/null and b/demoassets/PeopleAlpha.png differ diff --git a/demoassets/main.js b/demoassets/main.js index 5f43e61..bbf23b6 100644 --- a/demoassets/main.js +++ b/demoassets/main.js @@ -121,6 +121,10 @@ $(function(){ resembleControl.ignoreAntialiasing(); } else + if($this.is('#alpha')){ + resembleControl.ignoreAlpha(); + } + else if($this.is('#same-size')){ resembleControl.scaleToSameSize(); } @@ -217,8 +221,10 @@ $(function(){ (function(){ var xhr = new XMLHttpRequest(); var xhr2 = new XMLHttpRequest(); + var xhr3 = new XMLHttpRequest(); var done = $.Deferred(); var dtwo = $.Deferred(); + var dthree = $.Deferred(); xhr.open('GET', 'demoassets/People.jpg', true); xhr.responseType = 'blob'; @@ -234,6 +240,13 @@ $(function(){ }; xhr2.send(); + xhr3.open('GET', 'demoassets/PeopleAlpha.png', true); + xhr3.responseType = 'blob'; + xhr3.onload = function(e) { + dthree.resolve(this.response); + }; + xhr3.send(); + $('#example-images').click(function(){ $('#dropzone1').html(''); @@ -250,6 +263,22 @@ $(function(){ return false; }); + $('#example-images-alpha').click(function(){ + + $('#dropzone1').html(''); + $('#dropzone2').html(''); + + $.when(done, dthree).done(function(file, file1){ + if (typeof FileReader === 'undefined') { + resembleControl = resemble('demoassets/People.jpg').compareTo('demoassets/PeopleAlpha.png').onComplete(onComplete); + } else { + resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); + } + }); + + return false; + }); + }()); }); diff --git a/index.html b/index.html index fab28ca..d646229 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,12 @@ 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? + Don't have any images to compare? +
+ +
+
+

Diff will appear here. @@ -98,6 +103,7 @@ +

diff --git a/resemble.js b/resemble.js index 5278074..f2e9121 100644 --- a/resemble.js +++ b/resemble.js @@ -692,6 +692,21 @@ URL: https://github.com/Huddle/Resemble.js if(hasMethod) { param(); } return self; }, + ignoreAlpha: function() { + + tolerance.red = 16; + tolerance.green = 16; + tolerance.blue = 16; + tolerance.alpha = 255; + tolerance.minBrightness = 16; + tolerance.maxBrightness = 240; + + ignoreAntialiasing = false; + ignoreColors = false; + + if(hasMethod) { param(); } + return self; + }, repaint: function(){ if(hasMethod) { param(); } return self;