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

Add demo and update README; make code a bit more foolproof

pull/103/head
Kamil Bielawski 7 years ago
parent
25e4eece17
commit
ac04a5741f
4 changed files with 64 additions and 11 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. 12
      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.

12
resemble.js
Unescape View File

@ -29,15 +29,15 @@ 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) {
function withinBoundingBox(x, y, width, height) {
if (boundingBox === null) {
return true;
}
return x > boundingBox.x1 &&
x < boundingBox.x2 &&
y > boundingBox.y1 &&
y < boundingBox.y2;
return x > (boundingBox.x1 || 0) &&
x < (boundingBox.x2 || width) &&
y > (boundingBox.y1 || 0) &&
y < (boundingBox.y2 || height);
}
var errorPixelTransform = {
@ -433,7 +433,7 @@ URL: https://github.com/Huddle/Resemble.js
}
var offset = (verticalPos*width + horizontalPos) * 4;
var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos);
var isWithinBoundingBox = withinBoundingBox(horizontalPos, verticalPos, width, height);
if (!getPixelInfo(pixel1, data1, offset, 1) || !getPixelInfo(pixel2, data2, offset, 2)) {
return;

Write Preview
Loading…
Cancel
Save