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

Merge pull request #127 from kamilbielawski/feature/118-ignore-rectangle 

Add support for ignoring rectangle
pull/134/head
James Cryer 7 years ago committed by GitHub
parent
4af2cb2161 72bd436487
commit
f4fb994f5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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. 37
      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;">

37
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;
if (boundingBox !== undefined && !withinBoundingBox(x, y, width, height, boundingBox)) {
isIncluded = false;
} }
return x > (boundingBox.left || 0) && if (ignoredBox !== undefined && withinBoundingBox(x, y, width, height, ignoredBox)) {
x < (boundingBox.right || width) && isIncluded = false;
y > (boundingBox.top || 0) && }
y < (boundingBox.bottom || height);
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