From 72bd43648775b005d67be433dbeaaa5684e917e1 Mon Sep 17 00:00:00 2001
From: Kamil Bielawski <k_bielawski@fastmail.fm>
Date: Wed, 31 Jan 2018 21:58:40 +0100
Subject: [PATCH] Add support for ignoring rectangle

---
 README.md          | 14 ++++++++++++++
 demoassets/main.js | 19 +++++++++++++++----
 index.html         | 37 +++++++++++++++++++++++++++++++++----
 resemble.js        | 39 +++++++++++++++++++++++++++------------
 4 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 6972c42..85c0b09 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,20 @@ resemble.outputSettings({
 // .repaint();
 ```
 
+You can also exclude part of the image from comparison, by specifying the excluded area in pixels from the top left:
+
+```javascript
+resemble.outputSettings({
+  ignoredBox: {
+    left: 100,
+    top: 200,
+    right: 200,
+    bottom: 600
+  }
+})
+// .repaint();
+```
+
 By default, the comparison algorithm skips pixels when the image width or height is larger than 1200 pixels. This is there to mitigate performance issues.
 
 You can modify this behaviour by setting the `largeImageThreshold` option to a different value. Set it to **0** to switch it off completely.
diff --git a/demoassets/main.js b/demoassets/main.js
index 7f73910..9ed4a1f 100644
--- a/demoassets/main.js
+++ b/demoassets/main.js
@@ -198,10 +198,21 @@ $(function(){
 		if($this.is('#boundingBox')){
 			resembleControl.outputSettings({
 				boundingBox: {
-					left: $("#x1").val(),
-					top: $("#y1").val(),
-					right: $("#x2").val(),
-					bottom: $("#y2").val()
+					left: $("#bounding-box-x1").val(),
+					top: $("#bounding-box-y1").val(),
+					right: $("#bounding-box-x2").val(),
+					bottom: $("#bounding-box-y2").val()
+				}
+			}).repaint();
+			$this.removeClass('active');
+		}
+		if($this.is('#ignoredBox')){
+			resembleControl.outputSettings({
+				ignoredBox: {
+					left: $("#ignored-box-x1").val(),
+					top: $("#ignored-box-y1").val(),
+					right: $("#ignored-box-x2").val(),
+					bottom: $("#ignored-box-y2").val()
 				}
 			}).repaint();
 			$this.removeClass('active');
diff --git a/index.html b/index.html
index e1ba636..86c43fe 100644
--- a/index.html
+++ b/index.html
@@ -142,19 +142,19 @@
 									<div class="row">
 										<div class="span1">
 											<label>Left</label>
-											<input type="number" class="input-mini" id="x1" value="100" />
+											<input type="number" class="input-mini" id="bounding-box-x1" value="100" />
 										</div>
 										<div class="span1">
 											<label>Top</label>
-											<input type="number" class="input-mini" id="y1" value="100" />
+											<input type="number" class="input-mini" id="bounding-box-y1" value="100" />
 										</div>
 										<div class="span1">
 											<label>Right</label>
-											<input type="number" class="input-mini" id="x2" value="400" />
+											<input type="number" class="input-mini" id="bounding-box-x2" value="400" />
 										</div>
 										<div class="span1">
 											<label>Bottom</label>
-											<input type="number" class="input-mini" id="y2" value="300" />
+											<input type="number" class="input-mini" id="bounding-box-y2" value="300" />
 										</div>
 										<div class="span2">
 											<label>&nbsp;</label>
@@ -162,6 +162,35 @@
 										</div>
 									</div>
 								</div>
+
+								<br/>
+								<br/>
+
+								<div class="btn-group buttons" style="display:none">
+									<div class="row">
+										<div class="span1">
+											<label>Left</label>
+											<input type="number" class="input-mini" id="ignored-box-x1" value="120" />
+										</div>
+										<div class="span1">
+											<label>Top</label>
+											<input type="number" class="input-mini" id="ignored-box-y1" value="200" />
+										</div>
+										<div class="span1">
+											<label>Right</label>
+											<input type="number" class="input-mini" id="ignored-box-x2" value="400" />
+										</div>
+										<div class="span1">
+											<label>Bottom</label>
+											<input type="number" class="input-mini" id="ignored-box-y2" value="250" />
+										</div>
+										<div class="span2">
+											<label>&nbsp;</label>
+											<button class="btn" id="ignoredBox">Set ignored box</button>
+										</div>
+									</div>
+								</div>
+
 								<br/>
 								<br/>
 								<div id="diff-results" style="display:none;">
diff --git a/resemble.js b/resemble.js
index b265e66..ba65dea 100644
--- a/resemble.js
+++ b/resemble.js
@@ -50,15 +50,25 @@ URL: https://github.com/Huddle/Resemble.js
 			return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3;
 		}
 
-		function withinBoundingBox(x, y, width, height) {
-			if (!boundingBox) {
-				return true;
-			}
+		function withinBoundingBox(x, y, width, height, box) {
+		  return x > (box.left || 0) &&
+			 x < (box.right || width) &&
+			 y > (box.top || 0) &&
+			 y < (box.bottom || height);
+		}
+
+		function withinComparedArea(x, y, width, height) {
+		  var isIncluded = true;
 
-					return x > (boundingBox.left || 0) &&
-							x < (boundingBox.right || width) &&
-							y > (boundingBox.top || 0) &&
-							y < (boundingBox.bottom || height);
+		  if (boundingBox !== undefined && !withinBoundingBox(x, y, width, height, boundingBox)) {
+		    isIncluded = false;
+		  }
+
+		  if (ignoredBox !== undefined && withinBoundingBox(x, y, width, height, ignoredBox)) {
+		    isIncluded = false;
+		  }
+
+		  return isIncluded;
 		}
 
 		var errorPixelTransform = {
@@ -99,6 +109,7 @@ URL: https://github.com/Huddle/Resemble.js
 		var errorPixel = errorPixelTransform.flat;
 		var errorType;
 		var boundingBox;
+		var ignoredBox;
 		var largeImageThreshold = 1200;
 		var useCrossOrigin = true;
 		var data = {};
@@ -474,7 +485,7 @@ URL: https://github.com/Huddle/Resemble.js
 				}
 
 				var offset = (verticalPos*width + horizontalPos) * 4;
-				var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos, width, height);
+				var isWithinComparedArea = withinComparedArea(horizontalPos, verticalPos, width, height);
 
 				if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
 					return;
@@ -485,7 +496,7 @@ URL: https://github.com/Huddle/Resemble.js
 					addBrightnessInfo(pixel1);
 					addBrightnessInfo(pixel2);
 
-					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
+					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinComparedArea ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
@@ -495,7 +506,7 @@ URL: https://github.com/Huddle/Resemble.js
 					return;
 				}
 
-				if( isRGBSimilar(pixel1, pixel2)  || !isWithinBoundingBox ){
+				if( isRGBSimilar(pixel1, pixel2)  || !isWithinComparedArea ){
 					copyPixel(targetPix, offset, pixel1);
 
 				} else if( ignoreAntialiasing && (
@@ -505,7 +516,7 @@ URL: https://github.com/Huddle/Resemble.js
 						isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
 					)){
 
-					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
+					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinComparedArea ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
@@ -629,6 +640,10 @@ URL: https://github.com/Huddle/Resemble.js
 				boundingBox = options.boundingBox;
 			}
 
+			if (options.ignoredBox !== undefined) {
+				ignoredBox = options.ignoredBox;
+			}
+
 		}
 
 		function compare(one, two){