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
Unified 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: And change the output display style:
```javascript ```javascript
resemble.outputSettings({ resembleControl.outputSettings({
errorColor: { errorColor: {
red: 255, red: 255,
green: 0, green: 0,
@ -75,22 +75,22 @@ resemble.outputSettings({
largeImageThreshold: 1200, largeImageThreshold: 1200,
useCrossOrigin: false, useCrossOrigin: false,
outputDiff: true 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: It is possible to narrow down the area of comparison, by specifying a bounding box measured in pixels from the top left:
```javascript ```javascript
resemble.outputSettings({ resembleControl.outputSettings({
boundingBox: { boundingBox: {
left: 100, left: 100,
top: 200, top: 200,
right: 200, right: 200,
bottom: 600 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. 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 () { }(this, function () {
'use strict'; 'use strict';
var pixelTransparency = 1; var document = typeof window != "undefined" ? window.document : {
createElement: function() {
var errorPixelColor = { // Color for Error Pixels. Between 0 and 255. // This will work as long as only createElement is used on window.document
red: 255, var Canvas = require('canvas-prebuilt');
green: 0, return new Canvas();
blue: 255, }
alpha: 255
}; };
var targetPix = {r: 0, g: 0, b: 0, a: 0}; // isAntialiased var resemble = function( fileData ){
var pixelTransparency = 1;
function colorsDistance(c1, c2){ var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3; red: 255,
} green: 0,
blue: 255,
alpha: 255
};
function withinBoundingBox(x, y, width, height) { var targetPix = {r: 0, g: 0, b: 0, a: 0}; // isAntialiased
if (!boundingBox) {
return true; 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) && function withinBoundingBox(x, y, width, height) {
x < (boundingBox.right || width) && if (!boundingBox) {
y > (boundingBox.top || 0) && return true;
y < (boundingBox.bottom || height); }
}
var errorPixelTransform = { return x > (boundingBox.left || 0) &&
flat: function (px, offset, d1, d2) { x < (boundingBox.right || width) &&
px[offset] = errorPixelColor.red; y > (boundingBox.top || 0) &&
px[offset + 1] = errorPixelColor.green; y < (boundingBox.bottom || height);
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;
} }
};
var errorPixel = errorPixelTransform.flat; var errorPixelTransform = {
var errorType; flat: function (px, offset, d1, d2) {
var boundingBox; px[offset] = errorPixelColor.red;
var largeImageThreshold = 1200; px[offset + 1] = errorPixelColor.green;
var useCrossOrigin = true; px[offset + 2] = errorPixelColor.blue;
var document = typeof window != "undefined" ? window.document : { px[offset + 3] = errorPixelColor.alpha;
createElement: function() { },
// This will work as long as only createElement is used on window.document movement: function (px, offset, d1, d2) {
var Canvas = require('canvas-prebuilt'); px[offset] = ((d2.r * (errorPixelColor.red / 255)) + errorPixelColor.red) / 2;
return new Canvas(); 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 data = {};
var images = []; var images = [];
var updateCallbackArray = []; var updateCallbackArray = [];
@ -745,45 +744,44 @@ URL: https://github.com/Huddle/Resemble.js
}, },
compareTo: function(secondFileData){ compareTo: function(secondFileData){
return getCompareApi(secondFileData); return getCompareApi(secondFileData);
} },
}; outputSettings: function(options){
var key;
}; var undefined;
resemble.outputSettings = function(options){ if(options.errorColor){
var key; for (key in options.errorColor) {
var undefined; errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
}
}
if(options.errorColor){ if(options.errorType && errorPixelTransform[options.errorType] ){
for (key in options.errorColor) { errorPixel = errorPixelTransform[options.errorType];
errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key]; errorType = options.errorType;
} }
}
if(options.errorType && errorPixelTransform[options.errorType] ){ if(options.errorPixel && typeof options.errorPixel === "function") {
errorPixel = errorPixelTransform[options.errorType]; errorPixel = options.errorPixel;
errorType = options.errorType; }
}
if(options.errorPixel && typeof options.errorPixel === "function") { pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency;
errorPixel = options.errorPixel;
}
pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency; if (options.largeImageThreshold !== undefined) {
largeImageThreshold = options.largeImageThreshold;
}
if (options.largeImageThreshold !== undefined) { if (options.useCrossOrigin !== undefined) {
largeImageThreshold = options.largeImageThreshold; useCrossOrigin = options.useCrossOrigin;
} }
if (options.useCrossOrigin !== undefined) { if (options.boundingBox !== undefined) {
useCrossOrigin = options.useCrossOrigin; boundingBox = options.boundingBox;
} }
if (options.boundingBox !== undefined) { return this;
boundingBox = options.boundingBox; }
} };
return this;
}; };
return resemble; return resemble;

Write Preview
Loading…
Cancel
Save