diff --git a/README.md b/README.md
index 572ee95..b8438d9 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 @@
+
+
+
+
+
+
diff --git a/resemble.js b/resemble.js
index 2b9d763..f9de8cd 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){