Merge branch 'feature/100-compare-part-of-image' of https://github.com/kamilbielawski/Resemble.js into kamilbielawski-feature/100-compare-part-of-image

README.md

@@ -77,6 +77,20 @@ resemble.outputSettings({
 // resembleControl.repaint();
 ```
 
+It is possible to narrow down the area of comparison, by specifying bounding box:
+
+```javascript
+resemble.outputSettings({
+  boundingBox: {
+    x1: 100,  // left
+    y1: 200,  // top
+    x2: 200,  // right
+    y2: 600,  // bottom
+  }
+});
+// resembleControl.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.

demoassets/main.js

@@ -192,6 +192,19 @@ $(function(){
 			});
 			resembleControl.repaint();
 		}
+		else
+		if($this.is('#boundingBox')){
+			resemble.outputSettings({
+				boundingBox: {
+					x1: $("#x1").val(),
+					y1: $("#y1").val(),
+					x2: $("#x2").val(),
+					y2: $("#y2").val(),
+				}
+			});
+			resembleControl.repaint();
+			$this.removeClass('active');
+		}
 	});
 
 	(function(){

index.html

@@ -127,7 +127,33 @@
 									<button class="btn active" id="opaque">Opaque</button>
 									<button class="btn" id="transparent">Transparent</button>
 								</div>
+								<br/>
+								<br/>
 
+								<div class="btn-group buttons" style="display:none">
+									<div class="row">
+										<div class="span1">
+											<label>X1</label>
+											<input type="number" class="input-mini" id="x1" value="100" />
+										</div>
+										<div class="span1">
+											<label>Y1</label>
+											<input type="number" class="input-mini" id="y1" value="100" />
+										</div>
+										<div class="span1">
+											<label>X2</label>
+											<input type="number" class="input-mini" id="x2" value="400" />
+										</div>
+										<div class="span1">
+											<label>Y2</label>
+											<input type="number" class="input-mini" id="y2" value="300" />
+										</div>
+										<div class="span2">
+											<label>&nbsp;</label>
+											<button class="btn" id="boundingBox">Set bounding box</button>
+										</div>
+									</div>
+								</div>
 								<br/>
 								<br/>
 								<div id="diff-results" style="display:none;">

resemble.js

@@ -29,6 +29,17 @@ 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 === null) {
+			return true;
+    }
+
+    return x > (boundingBox.x1 || 0) &&
+      x < (boundingBox.x2 || width) &&
+      y > (boundingBox.y1 || 0) &&
+      y < (boundingBox.y2 || height);
+  }
+
 	var errorPixelTransform = {
 		flat: function (px, offset, d1, d2) {
 			px[offset] = errorPixelColor.red;
@@ -59,6 +70,7 @@ URL: https://github.com/Huddle/Resemble.js
 	};
 
 	var errorPixel = errorPixelTransform.flat;
+	var boundingBox = null;
 	var largeImageThreshold = 1200;
 	var useCrossOrigin = true;
 	var document = typeof window != "undefined" ? window.document : {
@@ -437,6 +449,7 @@ URL: https://github.com/Huddle/Resemble.js
 				}
 
 				var offset = (verticalPos*width + horizontalPos) * 4;
+				var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos, width, height);
 
 				if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
 					return;
@@ -447,7 +460,7 @@ URL: https://github.com/Huddle/Resemble.js
 					addBrightnessInfo(pixel1);
 					addBrightnessInfo(pixel2);
 
-					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
+					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
@@ -457,7 +470,7 @@ URL: https://github.com/Huddle/Resemble.js
 					return;
 				}
 
-				if( isRGBSimilar(pixel1, pixel2) ){
+				if( isRGBSimilar(pixel1, pixel2)  || !isWithinBoundingBox ){
 					copyPixel(targetPix, offset, pixel1, pixel2);
 
 				} else if( ignoreAntialiasing && (
@@ -467,7 +480,7 @@ URL: https://github.com/Huddle/Resemble.js
 						isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
 					)){
 
-					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
+					if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
@@ -727,6 +740,10 @@ URL: https://github.com/Huddle/Resemble.js
 			useCrossOrigin = options.useCrossOrigin;
 		}
 
+		if (options.boundingBox !== undefined) {
+			boundingBox = options.boundingBox;
+		}
+
 		return this;
 	};