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?
+
+
+
+
+