Merge branch 'kamilbielawski-feature/88-add-ignore-alpha-option'

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();
 ```
 

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('<img src="demoassets/People.jpg"/>');
@@ -250,6 +263,22 @@ $(function(){
 			return false;
 		});
 
+		$('#example-images-alpha').click(function(){
+
+			$('#dropzone1').html('<img src="demoassets/People.jpg"/>');
+			$('#dropzone2').html('<img src="demoassets/PeopleAlpha.png"/>');
+
+			$.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;
+		});
+
 	}());
 
 });

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!
 								</p>
 								<p>
-								Don't have any images to compare? <button class="btn" id="example-images">Use example images</button>
+								Don't have any images to compare?
+                                                                <br />
+                                                                <button class="btn" id="example-images">Use example images</button>
+                                                                <br />
+                                                                <br />
+                                                                <button class="btn" id="example-images-alpha">Use example images with alpha</button>
 								</p>
 								<div id="image-diff" class="small-drop-zone">
 									Diff will appear here.
@@ -98,6 +103,7 @@
 									<button class="btn active" id="less">Ignore less</button>
 									<button class="btn" id="colors">Ignore colors</button>
 									<button class="btn" id="antialising">Ignore antialiasing</button>
+									<button class="btn" id="alpha">Ignore alpha</button>
 								</div>
 
 								<br/>

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;