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

move outputSettings onto resemble object 

this prevents global variables changing between independant runs.
pull/117/head
Thomas Grainger 7 years ago
parent
3ee058afb0
commit
59b7cd76e1
No known key found for this signature in database
GPG Key ID: B120038F793F513C
2 changed files with 99 additions and 101 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. 12
      README.md
  2. 188
      resemble.js

12
README.md
Unescape View File

@ -64,7 +64,7 @@ diff.ignoreAntialiasing();
And change the output display style:
```javascript
resemble.outputSettings({
resembleControl.outputSettings({
errorColor: {
red: 255,
green: 0,
@ -75,22 +75,22 @@ resemble.outputSettings({
largeImageThreshold: 1200,
useCrossOrigin: false,
outputDiff: true
});
// resembleControl.repaint();
})
// .repaint();
```
It is possible to narrow down the area of comparison, by specifying a bounding box measured in pixels from the top left:
```javascript
resemble.outputSettings({
resembleControl.outputSettings({
boundingBox: {
left: 100,
top: 200,
right: 200,
bottom: 600
}
});
// resembleControl.repaint();
})
// .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.

188
resemble.js
Unescape View File

@ -14,82 +14,81 @@ URL: https://github.com/Huddle/Resemble.js
}(this, function () {
'use strict';
var pixelTransparency = 1;
var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
red: 255,
green: 0,
blue: 255,
alpha: 255
var document = typeof window != "undefined" ? window.document : {
createElement: function() {
// This will work as long as only createElement is used on window.document
var Canvas = require('canvas-prebuilt');
return new Canvas();
}
};
var targetPix = {r: 0, g: 0, b: 0, a: 0}; // isAntialiased
var resemble = function( fileData ){
var pixelTransparency = 1;
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 errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
red: 255,
green: 0,
blue: 255,
alpha: 255
};
function withinBoundingBox(x, y, width, height) {
if (!boundingBox) {
return true;
var targetPix = {r: 0, g: 0, b: 0, a: 0}; // isAntialiased
function colorsDistance(c1, c2){
return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3;
}
return x > (boundingBox.left || 0) &&
x < (boundingBox.right || width) &&
y > (boundingBox.top || 0) &&
y < (boundingBox.bottom || height);
}
function withinBoundingBox(x, y, width, height) {
if (!boundingBox) {
return true;
}
var errorPixelTransform = {
flat: function (px, offset, d1, d2) {
px[offset] = errorPixelColor.red;
px[offset + 1] = errorPixelColor.green;
px[offset + 2] = errorPixelColor.blue;
px[offset + 3] = errorPixelColor.alpha;
},
movement: function (px, offset, d1, d2) {
px[offset] = ((d2.r * (errorPixelColor.red / 255)) + errorPixelColor.red) / 2;
px[offset + 1] = ((d2.g * (errorPixelColor.green / 255)) + errorPixelColor.green) / 2;
px[offset + 2] = ((d2.b * (errorPixelColor.blue / 255)) + errorPixelColor.blue) / 2;
px[offset + 3] = d2.a;
},
flatDifferenceIntensity: function (px, offset, d1, d2) {
px[offset] = errorPixelColor.red;
px[offset + 1] = errorPixelColor.green;
px[offset + 2] = errorPixelColor.blue;
px[offset + 3] = colorsDistance(d1, d2);
},
movementDifferenceIntensity: function (px, offset, d1, d2) {
var ratio = colorsDistance(d1, d2) / 255 * 0.8;
px[offset] = ((1 - ratio) * (d2.r * (errorPixelColor.red / 255)) + ratio * errorPixelColor.red);
px[offset + 1] = ((1 - ratio) * (d2.g * (errorPixelColor.green / 255)) + ratio * errorPixelColor.green);
px[offset + 2] = ((1 - ratio) * (d2.b * (errorPixelColor.blue / 255)) + ratio * errorPixelColor.blue);
px[offset + 3] = d2.a;
},
diffOnly: function (px, offset, d1, d2) {
px[offset] = d2.r;
px[offset + 1] = d2.g;
px[offset + 2] = d2.b;
px[offset + 3] = d2.a;
return x > (boundingBox.left || 0) &&
x < (boundingBox.right || width) &&
y > (boundingBox.top || 0) &&
y < (boundingBox.bottom || height);
}
};
var errorPixel = errorPixelTransform.flat;
var errorType;
var boundingBox;
var largeImageThreshold = 1200;
var useCrossOrigin = true;
var document = typeof window != "undefined" ? window.document : {
createElement: function() {
// This will work as long as only createElement is used on window.document
var Canvas = require('canvas-prebuilt');
return new Canvas();
}
};
var errorPixelTransform = {
flat: function (px, offset, d1, d2) {
px[offset] = errorPixelColor.red;
px[offset + 1] = errorPixelColor.green;
px[offset + 2] = errorPixelColor.blue;
px[offset + 3] = errorPixelColor.alpha;
},
movement: function (px, offset, d1, d2) {
px[offset] = ((d2.r * (errorPixelColor.red / 255)) + errorPixelColor.red) / 2;
px[offset + 1] = ((d2.g * (errorPixelColor.green / 255)) + errorPixelColor.green) / 2;
px[offset + 2] = ((d2.b * (errorPixelColor.blue / 255)) + errorPixelColor.blue) / 2;
px[offset + 3] = d2.a;
},
flatDifferenceIntensity: function (px, offset, d1, d2) {
px[offset] = errorPixelColor.red;
px[offset + 1] = errorPixelColor.green;
px[offset + 2] = errorPixelColor.blue;
px[offset + 3] = colorsDistance(d1, d2);
},
movementDifferenceIntensity: function (px, offset, d1, d2) {
var ratio = colorsDistance(d1, d2) / 255 * 0.8;
var resemble = function( fileData ){
px[offset] = ((1 - ratio) * (d2.r * (errorPixelColor.red / 255)) + ratio * errorPixelColor.red);
px[offset + 1] = ((1 - ratio) * (d2.g * (errorPixelColor.green / 255)) + ratio * errorPixelColor.green);
px[offset + 2] = ((1 - ratio) * (d2.b * (errorPixelColor.blue / 255)) + ratio * errorPixelColor.blue);
px[offset + 3] = d2.a;
},
diffOnly: function (px, offset, d1, d2) {
px[offset] = d2.r;
px[offset + 1] = d2.g;
px[offset + 2] = d2.b;
px[offset + 3] = d2.a;
}
};
var errorPixel = errorPixelTransform.flat;
var errorType;
var boundingBox;
var largeImageThreshold = 1200;
var useCrossOrigin = true;
var data = {};
var images = [];
var updateCallbackArray = [];
@ -745,45 +744,44 @@ URL: https://github.com/Huddle/Resemble.js
},
compareTo: function(secondFileData){
return getCompareApi(secondFileData);
}
};
};
},
outputSettings: function(options){
var key;
var undefined;
resemble.outputSettings = function(options){
var key;
var undefined;
if(options.errorColor){
for (key in options.errorColor) {
errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
}
}
if(options.errorColor){
for (key in options.errorColor) {
errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
}
}
if(options.errorType && errorPixelTransform[options.errorType] ){
errorPixel = errorPixelTransform[options.errorType];
errorType = options.errorType;
}
if(options.errorType && errorPixelTransform[options.errorType] ){
errorPixel = errorPixelTransform[options.errorType];
errorType = options.errorType;
}
if(options.errorPixel && typeof options.errorPixel === "function") {
errorPixel = options.errorPixel;
}
if(options.errorPixel && typeof options.errorPixel === "function") {
errorPixel = options.errorPixel;
}
pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency;
pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency;
if (options.largeImageThreshold !== undefined) {
largeImageThreshold = options.largeImageThreshold;
}
if (options.largeImageThreshold !== undefined) {
largeImageThreshold = options.largeImageThreshold;
}
if (options.useCrossOrigin !== undefined) {
useCrossOrigin = options.useCrossOrigin;
}
if (options.useCrossOrigin !== undefined) {
useCrossOrigin = options.useCrossOrigin;
}
if (options.boundingBox !== undefined) {
boundingBox = options.boundingBox;
}
if (options.boundingBox !== undefined) {
boundingBox = options.boundingBox;
}
return this;
}
};
return this;
};
return resemble;

Write Preview
Loading…
Cancel
Save