From c3c62fa05b4f06d6e56a1b93cda7216f2a7c44d6 Mon Sep 17 00:00:00 2001
From: Kamil Bielawski <k_bielawski@fastmail.fm>
Date: Sun, 17 Sep 2017 00:23:22 +0200
Subject: [PATCH 1/2] Add outputDiff option

---
 resemble.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/resemble.js b/resemble.js
index 58cefb0..5eeae61 100644
--- a/resemble.js
+++ b/resemble.js
@@ -66,6 +66,12 @@ URL: https://github.com/Huddle/Resemble.js
 			px[offset + 1] = ((1 - ratio) * (d2.g * (errorPixelColor.green / 255)) + ratio * errorPixelColor.green);
 			px[offset + 2] = ((1 - ratio) * (d2.b * (errorPixelColor.blue / 255)) + ratio * errorPixelColor.blue);
 			px[offset + 3] = d2.a;
+		},
+		copySecondImage: function (px, offset, d1, d2) {
+			px[offset] = d2.r;
+			px[offset + 1] = d2.g;
+			px[offset + 2] = d2.b;
+			px[offset + 3] = d2.a;
 		}
 	};
 
@@ -73,6 +79,7 @@ URL: https://github.com/Huddle/Resemble.js
 	var boundingBox;
 	var largeImageThreshold = 1200;
 	var useCrossOrigin = true;
+	var outputDiff = false;
 	var document = typeof window != "undefined" ? window.document : {
 		createElement: function() {
 			// This will work as long as only createElement is used on window.document
@@ -367,6 +374,10 @@ URL: https://github.com/Huddle/Resemble.js
 		}
 
 		function copyPixel(px, offset, data){
+			if (outputDiff) {
+				return;
+			}
+
 			px[offset] = data.r; //r
 			px[offset + 1] = data.g; //g
 			px[offset + 2] = data.b; //b
@@ -374,6 +385,10 @@ URL: https://github.com/Huddle/Resemble.js
 		}
 
 		function copyGrayScalePixel(px, offset, data){
+			if (outputDiff) {
+				return;
+			}
+
 			px[offset] = data.brightness; //r
 			px[offset + 1] = data.brightness; //g
 			px[offset + 2] = data.brightness; //b
@@ -744,6 +759,11 @@ URL: https://github.com/Huddle/Resemble.js
 			boundingBox = options.boundingBox;
 		}
 
+		if (options.outputDiff) {
+			outputDiff = options.outputDiff;
+			errorPixel = errorPixelTransform.copySecondImage;
+		}
+
 		return this;
 	};
 

From c714960790807c3b1fa62dc4ad24a0d062247fb5 Mon Sep 17 00:00:00 2001
From: Kamil Bielawski <k_bielawski@fastmail.fm>
Date: Sun, 17 Sep 2017 00:55:46 +0200
Subject: [PATCH 2/2] Update demo

---
 README.md          | 3 ++-
 demoassets/main.js | 7 +++++++
 index.html         | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ca58c49..c205757 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,8 @@ resemble.outputSettings({
   errorType: 'movement',
   transparency: 0.3,
   largeImageThreshold: 1200,
-  useCrossOrigin: false
+  useCrossOrigin: false,
+  outputDiff: true
 });
 // resembleControl.repaint();
 ```
diff --git a/demoassets/main.js b/demoassets/main.js
index 993b86e..8f44fdc 100644
--- a/demoassets/main.js
+++ b/demoassets/main.js
@@ -179,6 +179,13 @@ $(function(){
 			resembleControl.repaint();
 		}
 		else
+		if($this.is('#outputDiff')){
+			resemble.outputSettings({
+				outputDiff: true
+			});
+			resembleControl.repaint();
+		}
+		else
 		if($this.is('#opaque')){
 			resemble.outputSettings({
 				transparency: 1
diff --git a/index.html b/index.html
index 0443795..827db2f 100644
--- a/index.html
+++ b/index.html
@@ -119,6 +119,7 @@
 									<button class="btn" id="movement">Movement</button>
 									<button class="btn" id="flatDifferenceIntensity">Flat with diff intensity</button>
 									<button class="btn" id="movementDifferenceIntensity">Movement with diff intensity</button>
+									<button class="btn" id="outputDiff">Diff portion from the input</button>
 								</div>
 								<br/>
 								<br/>