Add demo and update README; make code a bit more foolproof

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,15 +29,15 @@ 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) {
+	function withinBoundingBox(x, y, width, height) {
 		if (boundingBox === null) {
 			return true;
     }
 
-    return x > boundingBox.x1 &&
-      x < boundingBox.x2 &&
-      y > boundingBox.y1 &&
-      y < boundingBox.y2;
+    return x > (boundingBox.x1 || 0) &&
+      x < (boundingBox.x2 || width) &&
+      y > (boundingBox.y1 || 0) &&
+      y < (boundingBox.y2 || height);
   }
 
 	var errorPixelTransform = {
@@ -433,7 +433,7 @@ URL: https://github.com/Huddle/Resemble.js
 				}
 
 				var offset = (verticalPos*width + horizontalPos) * 4;
-				var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos);
+				var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos, width, height);
 
 				if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
 					return;