Add demo images with alpha; update README

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

@@ -221,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';
@@ -238,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"/>');
@@ -254,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.