diff --git a/README.md b/README.md index bba094b..b2356bf 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/resemble.js b/resemble.js index c7889f0..d079504 100644 --- a/resemble.js +++ b/resemble.js @@ -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;