diff --git a/README.md b/README.md index 8940d42..d551c11 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ It is a modification of [Resemble.js](https://github.com/Huddle/Resemble.js) ### Example -Retrieve basic analysis on image. +##### Retrieve basic analysis on image. ```javascript var api = resemble(fileData).onComplete(function(data){ @@ -27,7 +27,7 @@ var api = resemble(fileData).onComplete(function(data){ }); ``` -Use resemble to compare two images. +##### Use resemble to compare two images. ```javascript var diff = resemble(file).compareTo(file2).ignoreColors().onComplete(function(data){ @@ -43,7 +43,7 @@ var diff = resemble(file).compareTo(file2).ignoreColors().onComplete(function(da }); ``` -You can also change the comparison method after the first analysis. +##### You can also change the comparison method after the first analysis. ```javascript // diff.ignoreNothing(); @@ -51,7 +51,20 @@ You can also change the comparison method after the first analysis. diff.ignoreAntialiasing(); ``` -And change the output display style. +##### Specify matching Box for image comparsion + +```javascript +diff.ignoreRectangles([[325,170,100,40], [10,10,200,200]]); +``` +- Ignores matched rectangles +- <[Array]> +```javascript +diff.includeRectangles([[325,170,100,40], [10,10,200,200]]); +``` +- Compares only within given rectangles +- <[Array]> + +##### Change the output display style. ```javascript resemble.outputSettings({ diff --git a/resemble.js b/resemble.js index 995aab0..c816960 100644 --- a/resemble.js +++ b/resemble.js @@ -60,6 +60,7 @@ var _this = {}; var ignoreAntialiasing = false; var ignoreColors = false; var ignoreRectangles = null; + var includeRectangles = null; function triggerDataUpdate(){ var len = updateCallbackArray.length; @@ -157,6 +158,13 @@ var _this = {}; } } + function isWithinRectangle(x, y, rectangle) { + return (x >= rectangle[1]) && + (x < rectangle[1] + rectangle[3]) && + (y >= rectangle[0]) && + (y < rectangle[0] + rectangle[2]) + } + function isNumber(n) { return !isNaN(parseFloat(n)); } @@ -383,12 +391,7 @@ var _this = {}; for(rectagnlesIdx = 0; rectagnlesIdx < ignoreRectangles.length; rectagnlesIdx++) { currentRectangle = ignoreRectangles[rectagnlesIdx]; //console.log(currentRectangle, verticalPos, horizontalPos); - if ( - (verticalPos >= currentRectangle[1]) && - (verticalPos < currentRectangle[1] + currentRectangle[3]) && - (horizontalPos >= currentRectangle[0]) && - (horizontalPos < currentRectangle[0] + currentRectangle[2]) - ) { + if (isWithinRectangle(verticalPos, horizontalPos, currentRectangle)) { copyGrayScalePixel(targetPix, offset, pixel2); //copyPixel(targetPix, offset, pixel1, pixel2); return; @@ -396,6 +399,27 @@ var _this = {}; } } + if (includeRectangles) { + var isWithinAnyRectangle = false; + for(rectagnlesIdx = 0; rectagnlesIdx < includeRectangles.length; rectagnlesIdx++) { + currentRectangle = includeRectangles[rectagnlesIdx]; + if (isWithinRectangle(verticalPos, horizontalPos, currentRectangle)) { + isWithinAnyRectangle = true; + } + } + // Better solution but i'm not sure if you want to use reducers in your repo? + // var isWithinAnyRectangle = includeRectangles.reduce(function (acc, currentRectangle) { + // if(isWithinRectangle) { + // return true; + // } + // return acc; + // }, false); + if(!isWithinAnyRectangle) { + copyGrayScalePixel(targetPix, offset, pixel2); + return; + } + } + if (ignoreColors){ addBrightnessInfo(pixel1); @@ -539,6 +563,12 @@ var _this = {}; ignoreRectangles: function(rectangles) { ignoreRectangles = rectangles; return self; + }, + //array of rectangles, each rectangle is defined as (x, y, width. height) + //e.g. [[325, 170, 100, 40]] + includeRectangles: function(rectangles) { + includeRectangles = rectangles; + return self; }, repaint: function(){ if(hasMethod) { param(); }