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

Merge branch 'master' into gh-pages

pull/43/head
James Cryer 10 years ago
parent
aba174658e a89d23ccfb
commit
2d425d80ed
7 changed files with 107 additions and 23 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. 9
      README.md
  2. 4
      bower.json
  3. 14
      demoassets/main.js
  4. 2
      demoassets/resemble.css
  5. 12
      index.html
  6. 2
      package.json
  7. 87
      resemble.js

9
README.md
Unescape View File

@ -63,11 +63,16 @@ resemble.outputSettings({
blue: 255
},
errorType: 'movement',
transparency: 0.3
transparency: 0.3,
largeImageThreshold: 1200
});
// 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 switch this modify this behaviour by setting the `largeImageThreshold` option to a different value. Set it to **0** to switch it off completely.
--------------------------------------
Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.
Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.

4
bower.json
Unescape View File

@ -1,7 +1,7 @@
{
"name": "resemblejs",
"main": "Resemble.js",
"version": "1.0.1",
"main": "resemble.js",
"version": "1.2.1",
"homepage": "https://github.com/Huddle/Resemble.js",
"authors": [
"James Cryer <james.cryer@huddle.com>"

14
demoassets/main.js
Unescape View File

@ -151,6 +151,20 @@ $(function(){
resembleControl.repaint();
}
else
if($this.is('#flatDifferenceIntensity')){
resemble.outputSettings({
errorType: 'flatDifferenceIntensity'
});
resembleControl.repaint();
}
else
if($this.is('#movementDifferenceIntensity')){
resemble.outputSettings({
errorType: 'movementDifferenceIntensity'
});
resembleControl.repaint();
}
else
if($this.is('#opaque')){
resemble.outputSettings({
transparency: 1

2
demoassets/resemble.css
Unescape View File

@ -58,7 +58,7 @@ footer {
left: 0;
}
#image-diff {
margin-left: 0px;
margin-left: 0;
margin-top: 50px;
border-style: solid;
}

12
index.html
Unescape View File

@ -98,12 +98,18 @@
<button class="btn active" id="pink">Pink</button>
<button class="btn" id="yellow">Yellow</button>
</div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="flat">Flat</button>
<button class="btn" id="movement">Movement</button>
<button class="btn" id="flatDifferenceIntensity">Flat with diff intensity</button>
<button class="btn" id="movementDifferenceIntensity">Movement with diff intensity</button>
</div>
<br/>
<br/>
<div class="btn-group buttons" style="display:none">
<button class="btn active" id="opaque">Opaque</button>
<button class="btn" id="transparent">Transparent</button>
@ -140,7 +146,7 @@
</p>
<p>
<br/>
<a class="btn btn-large btn-primary" href="https://github.com/Huddle/Resemble.js"><strong>View project on Github</strong></a>
<a class="btn btn-large btn-primary" href="https://github.com/Huddle/Resemble.js"><strong>View project on GitHub</strong></a>
</p>
</div>
<div class="span6">
@ -188,4 +194,4 @@ resemble(file).compareTo(file2).onComplete(function(){
<script src="resemble.js"></script>
<script src="demoassets/main.js"></script>
</body>
</html>
</html>

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "resemblejs",
"version": "1.1.0",
"version": "1.2.1",
"description": "Image analysis and comparison with HTML5",
"main": "resemble.js",
"repository": {

87
resemble.js
Unescape View File

@ -15,6 +15,10 @@ URL: https://github.com/Huddle/Resemble.js
alpha: 255
};
function colorsDistance(c1, c2){
return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3;
}
var errorPixelTransform = {
flat : function (d1, d2){
return {
@ -31,11 +35,34 @@ URL: https://github.com/Huddle/Resemble.js
b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
a: d2.a
}
},
flatDifferenceIntensity: function (d1, d2){
return {
r: errorPixelColor.red,
g: errorPixelColor.green,
b: errorPixelColor.blue,
a: colorsDistance(d1, d2)
}
},
movementDifferenceIntensity: function (d1, d2){
var ratio = colorsDistance(d1, d2)/255 * 0.8;
return {
r: ((1-ratio)*(d2.r*(errorPixelColor.red/255)) + ratio*errorPixelColor.red),
g: ((1-ratio)*(d2.g*(errorPixelColor.green/255)) + ratio*errorPixelColor.green),
b: ((1-ratio)*(d2.b*(errorPixelColor.blue/255)) + ratio*errorPixelColor.blue),
a: d2.a
}
}
};
var errorPixelTransformer = errorPixelTransform.flat;
var largeImageThreshold = 1200;
var httpRegex = /^https?:\/\//;
var document = typeof window != "undefined" ? window.document : {};
var documentDomainRegex = new RegExp('^https?://' + document.domain);
_this['resemble'] = function( fileData ){
var data = {};
@ -76,7 +103,7 @@ URL: https://github.com/Huddle/Resemble.js
function parseImage(sourceImageData, width, height){
var pixleCount = 0;
var pixelCount = 0;
var redTotal = 0;
var greenTotal = 0;
var blueTotal = 0;
@ -89,7 +116,7 @@ URL: https://github.com/Huddle/Resemble.js
var blue = sourceImageData[offset + 2];
var brightness = getBrightness(red,green,blue);
pixleCount++;
pixelCount++;
redTotal += red / 255 * 100;
greenTotal += green / 255 * 100;
@ -97,10 +124,10 @@ URL: https://github.com/Huddle/Resemble.js
brightnessTotal += brightness / 255 * 100;
});
data.red = Math.floor(redTotal / pixleCount);
data.green = Math.floor(greenTotal / pixleCount);
data.blue = Math.floor(blueTotal / pixleCount);
data.brightness = Math.floor(brightnessTotal / pixleCount);
data.red = Math.floor(redTotal / pixelCount);
data.green = Math.floor(greenTotal / pixelCount);
data.blue = Math.floor(blueTotal / pixelCount);
data.brightness = Math.floor(brightnessTotal / pixelCount);
triggerDataUpdate();
}
@ -108,6 +135,10 @@ URL: https://github.com/Huddle/Resemble.js
function loadImageData( fileData, callback ){
var fileReader;
var hiddenImage = new Image();
if (httpRegex.test(fileData) && !documentDomainRegex.test(fileData)) {
hiddenImage.setAttribute('crossorigin', 'anonymous');
}
hiddenImage.onload = function() {
@ -128,6 +159,14 @@ URL: https://github.com/Huddle/Resemble.js
if (typeof fileData === 'string') {
hiddenImage.src = fileData;
if (hiddenImage.complete) {
hiddenImage.onload();
}
} else if (typeof fileData.data !== 'undefined'
&& typeof fileData.width === 'number'
&& typeof fileData.height === 'number') {
images.push(fileData);
callback(fileData, fileData.width, fileData.height);
} else {
fileReader = new FileReader();
fileReader.onload = function (event) {
@ -223,7 +262,7 @@ URL: https://github.com/Huddle/Resemble.js
var j;
var hasHighContrastSibling = 0;
var hasSiblingWithDifferentHue = 0;
var hasEquivilantSibling = 0;
var hasEquivalentSibling = 0;
addHueInfo(sourcePix);
@ -249,7 +288,7 @@ URL: https://github.com/Huddle/Resemble.js
}
if( isRGBSame(sourcePix,targetPix) ){
hasEquivilantSibling++;
hasEquivalentSibling++;
}
if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){
@ -263,7 +302,7 @@ URL: https://github.com/Huddle/Resemble.js
}
}
if(hasEquivilantSibling < 2){
if(hasEquivalentSibling < 2){
return true;
}
@ -341,12 +380,24 @@ URL: https://github.com/Huddle/Resemble.js
var targetPix = imgd.data;
var mismatchCount = 0;
var diffBounds = {
top: height,
left: width,
bottom: 0,
right: 0
};
var updateBounds = function(x, y) {
diffBounds.left = Math.min(x, diffBounds.left);
diffBounds.right = Math.max(x, diffBounds.right);
diffBounds.top = Math.min(y, diffBounds.top);
diffBounds.bottom = Math.max(y, diffBounds.bottom);
}
var time = Date.now();
var skip;
if( (width > 1200 || height > 1200) && ignoreAntialiasing){
if(!!largeImageThreshold && ignoreAntialiasing && (width > largeImageThreshold || height > largeImageThreshold)){
skip = 6;
}
@ -376,6 +427,7 @@ URL: https://github.com/Huddle/Resemble.js
} else {
errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
updateBounds(horizontalPos, verticalPos);
}
return;
}
@ -395,15 +447,18 @@ URL: https://github.com/Huddle/Resemble.js
} else {
errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
updateBounds(horizontalPos, verticalPos);
}
} else {
errorPixel(targetPix, offset, pixel1, pixel2);
mismatchCount++;
updateBounds(horizontalPos, verticalPos);
}
});
data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
data.diffBounds = diffBounds;
data.analysisTime = Date.now() - time;
data.getImageDataUrl = function(text){
@ -591,10 +646,14 @@ URL: https://github.com/Huddle/Resemble.js
if(options.errorType && errorPixelTransform[options.errorType] ){
errorPixelTransformer = errorPixelTransform[options.errorType];
}
pixelTransparency = options.transparency || pixelTransparency;
pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency;
if (options.largeImageThreshold !== undefined) {
largeImageThreshold = options.largeImageThreshold;
}
return this;
};
}(this));
}(this));

Write Preview
Loading…
Cancel
Save