Merge pull request #127 from kamilbielawski/feature/118-ignore-rectangle

Add support for ignoring rectangle
7 years ago · f4fb994f5f
4 changed files with 89 additions and 20 deletions
--- 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.
--- 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');
--- 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;">
--- 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){