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

Merge branch 'kamilbielawski-feature/100-compare-part-of-image'

pull/104/head
james.cryer 7 years ago
parent
407b1f31a5 74585fcfb4
commit
10e968ea1d
4 changed files with 78 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      README.md
  2. 13
      demoassets/main.js
  3. 36
      index.html
  4. 23
      resemble.js

14
README.md
Unescape View File

@ -77,6 +77,20 @@ resemble.outputSettings({
// resembleControl.repaint();
```
It is possible to narrow down the area of comparison, by specifying bounding box:
```javascript
resemble.outputSettings({
boundingBox: {
x1: 100, // left
y1: 200, // top
x2: 200, // right
y2: 600, // bottom
}
});
// resembleControl.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.

13
demoassets/main.js
Unescape View File

@ -192,6 +192,19 @@ $(function(){
});
resembleControl.repaint();
}
else
if($this.is('#boundingBox')){
resemble.outputSettings({
boundingBox: {
x1: $("#x1").val(),
y1: $("#y1").val(),
x2: $("#x2").val(),
y2: $("#y2").val(),
}
});
resembleControl.repaint();
$this.removeClass('active');
}
});
(function(){

36
index.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="demoassets/resemble.css?v1">
<link rel="stylesheet" href="demoassets/resemble.css?v1">
</head>
<body>
<div class="container">
@ -16,7 +16,7 @@
<h1>Resemble.js : Image analysis and comparison</h1>
</div>
</header>
<section role="main">
<div class="row">
<div class="span12">
@ -127,7 +127,33 @@
<button class="btn active" id="opaque">Opaque</button>
<button class="btn" id="transparent">Transparent</button>
</div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<div class="row">
<div class="span1">
<label>X1</label>
<input type="number" class="input-mini" id="x1" value="100" />
</div>
<div class="span1">
<label>Y1</label>
<input type="number" class="input-mini" id="y1" value="100" />
</div>
<div class="span1">
<label>X2</label>
<input type="number" class="input-mini" id="x2" value="400" />
</div>
<div class="span1">
<label>Y2</label>
<input type="number" class="input-mini" id="y2" value="300" />
</div>
<div class="span2">
<label>&nbsp;</label>
<button class="btn" id="boundingBox">Set bounding box</button>
</div>
</div>
</div>
<br/>
<br/>
<div id="diff-results" style="display:none;">
@ -139,7 +165,7 @@
Use the buttons above to change the comparison algorithm. Perhaps you don't care about color? Annoying antialiasing causing too much noise? Resemble.js offers multiple comparison options.
</p>
</div>
<p id="thesame" style="display:none;">
<strong>These images are the same!</strong>
</p>
@ -155,7 +181,7 @@
Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. However, it has been designed and built for use by the PhantomJS powered visual regression library <a href="https://github.com/Huddle/PhantomCSS" target="_blank">PhantomCSS</a>. PhantomCSS needs to be able to ignore antialiasing as this would cause differences between screenshots derived from different machines.
</p>
<p>
Resemble.js uses the <a href="http://www.w3.org/TR/file-upload/" target="_blank">HTML5 File API</a> to parse image data, and canvas for rendering image diffs.
Resemble.js uses the <a href="http://www.w3.org/TR/file-upload/" target="_blank">HTML5 File API</a> to parse image data, and canvas for rendering image diffs.
</p>
<p>
<br/>
@ -196,7 +222,7 @@ resemble(file).compareTo(file2).onComplete(function(){
</div>
</div>
</section>
<footer class="footer">
<p>
Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.

23
resemble.js
Unescape View File

@ -29,6 +29,17 @@ 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;
}
return x > (boundingBox.x1 || 0) &&
x < (boundingBox.x2 || width) &&
y > (boundingBox.y1 || 0) &&
y < (boundingBox.y2 || height);
}
var errorPixelTransform = {
flat: function (px, offset, d1, d2) {
px[offset] = errorPixelColor.red;
@ -59,6 +70,7 @@ URL: https://github.com/Huddle/Resemble.js
};
var errorPixel = errorPixelTransform.flat;
var boundingBox;
var largeImageThreshold = 1200;
var useCrossOrigin = true;
var document = typeof window != "undefined" ? window.document : {
@ -437,6 +449,7 @@ URL: https://github.com/Huddle/Resemble.js
}
var offset = (verticalPos*width + horizontalPos) * 4;
var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos, width, height);
if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
return;
@ -447,7 +460,7 @@ URL: https://github.com/Huddle/Resemble.js
addBrightnessInfo(pixel1);
addBrightnessInfo(pixel2);
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
errorPixel(targetPix, offset, pixel1, pixel2);
@ -457,7 +470,7 @@ URL: https://github.com/Huddle/Resemble.js
return;
}
if( isRGBSimilar(pixel1, pixel2) ){
if( isRGBSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
copyPixel(targetPix, offset, pixel1, pixel2);
} else if( ignoreAntialiasing && (
@ -467,7 +480,7 @@ URL: https://github.com/Huddle/Resemble.js
isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
)){
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
if( isPixelBrightnessSimilar(pixel1, pixel2) || !isWithinBoundingBox ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
errorPixel(targetPix, offset, pixel1, pixel2);
@ -727,6 +740,10 @@ URL: https://github.com/Huddle/Resemble.js
useCrossOrigin = options.useCrossOrigin;
}
if (options.boundingBox !== undefined) {
boundingBox = options.boundingBox;
}
return this;
};

Write Preview
Loading…
Cancel
Save