playground
/
Resemble.js
mirror of https://github.com/Huddle/Resemble.js.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add support for ignoring rectangle

pull/127/head
Kamil Bielawski 7 years ago
parent
b46e0571d4
commit
72bd436487
4 changed files with 89 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      README.md
  2. 19
      demoassets/main.js
  3. 37
      index.html
  4. 39
      resemble.js

14
README.md
Unescape View File

@ -93,6 +93,20 @@ resemble.outputSettings({
// .repaint(); // .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. 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. You can modify this behaviour by setting the `largeImageThreshold` option to a different value. Set it to **0** to switch it off completely.

19
demoassets/main.js
Unescape View File

@ -198,10 +198,21 @@ $(function(){
if($this.is('#boundingBox')){ if($this.is('#boundingBox')){
resembleControl.outputSettings({ resembleControl.outputSettings({
boundingBox: { boundingBox: {
left: $("#x1").val(), left: $("#bounding-box-x1").val(),
top: $("#y1").val(), top: $("#bounding-box-y1").val(),
right: $("#x2").val(), right: $("#bounding-box-x2").val(),
bottom: $("#y2").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(); }).repaint();
$this.removeClass('active'); $this.removeClass('active');

37
index.html
Unescape View File

@ -142,19 +142,19 @@
<div class="row"> <div class="row">
<div class="span1"> <div class="span1">
<label>Left</label> <label>Left</label>
<input type="number" class="input-mini" id="x1" value="100" /> <input type="number" class="input-mini" id="bounding-box-x1" value="100" />
</div> </div>
<div class="span1"> <div class="span1">
<label>Top</label> <label>Top</label>
<input type="number" class="input-mini" id="y1" value="100" /> <input type="number" class="input-mini" id="bounding-box-y1" value="100" />
</div> </div>
<div class="span1"> <div class="span1">
<label>Right</label> <label>Right</label>
<input type="number" class="input-mini" id="x2" value="400" /> <input type="number" class="input-mini" id="bounding-box-x2" value="400" />
</div> </div>
<div class="span1"> <div class="span1">
<label>Bottom</label> <label>Bottom</label>
<input type="number" class="input-mini" id="y2" value="300" /> <input type="number" class="input-mini" id="bounding-box-y2" value="300" />
</div> </div>
<div class="span2"> <div class="span2">
<label>&nbsp;</label> <label>&nbsp;</label>
@ -162,6 +162,35 @@
</div> </div>
</div> </div>
</div> </div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<div class="row">
<div class="span1">
<label>Left</label>
<input type="number" class="input-mini" id="ignored-box-x1" value="120" />
</div>
<div class="span1">
<label>Top</label>
<input type="number" class="input-mini" id="ignored-box-y1" value="200" />
</div>
<div class="span1">
<label>Right</label>
<input type="number" class="input-mini" id="ignored-box-x2" value="400" />
</div>
<div class="span1">
<label>Bottom</label>
<input type="number" class="input-mini" id="ignored-box-y2" value="250" />
</div>
<div class="span2">
<label>&nbsp;</label>
<button class="btn" id="ignoredBox">Set ignored box</button>
</div>
</div>
</div>
<br/> <br/>
<br/> <br/>
<div id="diff-results" style="display:none;"> <div id="diff-results" style="display:none;">

39
resemble.js
Unescape View File

@ -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; 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) { function withinBoundingBox(x, y, width, height, box) {
if (!boundingBox) { return x > (box.left || 0) &&
return true; 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) && if (boundingBox !== undefined && !withinBoundingBox(x, y, width, height, boundingBox)) {
x < (boundingBox.right || width) && isIncluded = false;
y > (boundingBox.top || 0) && }
y < (boundingBox.bottom || height);
if (ignoredBox !== undefined && withinBoundingBox(x, y, width, height, ignoredBox)) {
isIncluded = false;
}
return isIncluded;
} }
var errorPixelTransform = { var errorPixelTransform = {
@ -99,6 +109,7 @@ URL: https://github.com/Huddle/Resemble.js
var errorPixel = errorPixelTransform.flat; var errorPixel = errorPixelTransform.flat;
var errorType; var errorType;
var boundingBox; var boundingBox;
var ignoredBox;
var largeImageThreshold = 1200; var largeImageThreshold = 1200;
var useCrossOrigin = true; var useCrossOrigin = true;
var data = {}; var data = {};
@ -474,7 +485,7 @@ URL: https://github.com/Huddle/Resemble.js
} }
var offset = (verticalPos*width + horizontalPos) * 4; 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)) { if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
return; return;
@ -485,7 +496,7 @@ URL: https://github.com/Huddle/Resemble.js
addBrightnessInfo(pixel1); addBrightnessInfo(pixel1);
addBrightnessInfo(pixel2); addBrightnessInfo(pixel2);
if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){ if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinComparedArea ){
copyGrayScalePixel(targetPix, offset, pixel2); copyGrayScalePixel(targetPix, offset, pixel2);
} else { } else {
errorPixel(targetPix, offset, pixel1, pixel2); errorPixel(targetPix, offset, pixel1, pixel2);
@ -495,7 +506,7 @@ URL: https://github.com/Huddle/Resemble.js
return; return;
} }
if( isRGBSimilar(pixel1, pixel2) || !isWithinBoundingBox ){ if( isRGBSimilar(pixel1, pixel2) || !isWithinComparedArea ){
copyPixel(targetPix, offset, pixel1); copyPixel(targetPix, offset, pixel1);
} else if( ignoreAntialiasing && ( } else if( ignoreAntialiasing && (
@ -505,7 +516,7 @@ URL: https://github.com/Huddle/Resemble.js
isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width) isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
)){ )){
if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){ if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinComparedArea ){
copyGrayScalePixel(targetPix, offset, pixel2); copyGrayScalePixel(targetPix, offset, pixel2);
} else { } else {
errorPixel(targetPix, offset, pixel1, pixel2); errorPixel(targetPix, offset, pixel1, pixel2);
@ -629,6 +640,10 @@ URL: https://github.com/Huddle/Resemble.js
boundingBox = options.boundingBox; boundingBox = options.boundingBox;
} }
if (options.ignoredBox !== undefined) {
ignoredBox = options.ignoredBox;
}
} }
function compare(one, two){ function compare(one, two){

Write Preview
Loading…
Cancel
Save