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 @@
+
+
+
+
+
+
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){