blink-diff - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.js

@@ -19,6 +19,5 @@ // Copyright 2014 Yahoo! Inc.
  * @param {string} [options.imageOutputPath=undefined] Path to output image file
- * @param {boolean} [options.verbose=false] Verbose output?
  * @param {string} [options.thresholdType=BlinkDiff.THRESHOLD_PIXEL] Defines the threshold of the comparison
- * @param {int} [options.threshold=100] Threshold limit according to the comparison limit.
- * @param {number} [options.delta=15] Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference.
+ * @param {int} [options.threshold=500] Threshold limit according to the comparison limit.
+ * @param {number} [options.delta=20] Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference.
  * @param {int} [options.outputMaskRed=255] Value to set for red on difference pixel. 'Undefined' will not change the value.
@@ -28,3 +27,8 @@ * @param {int} [options.outputMaskGreen=0] Value to set for green on difference pixel. 'Undefined' will not change the value.
  * @param {int} [options.outputMaskAlpha=255] Value to set for the alpha channel on difference pixel. 'Undefined' will not change the value.
- * @param {int} [options.outputMaskOpacity=undefined] Strength of masking the pixel. 1.0 means that the full color will be used; anything less will mix-in the original pixel.
+ * @param {int} [options.outputMaskOpacity=0.7] Strength of masking the pixel. 1.0 means that the full color will be used; anything less will mix-in the original pixel.
+ * @param {int} [options.outputShiftRed=255] Value to set for red on shifted pixel. 'Undefined' will not change the value.
+ * @param {int} [options.outputShiftGreen=165] Value to set for green on shifted pixel. 'Undefined' will not change the value.
+ * @param {int} [options.outputShiftBlue=0] Value to set for blue on shifted pixel. 'Undefined' will not change the value.
+ * @param {int} [options.outputShiftAlpha=255] Value to set for the alpha channel on shifted pixel. 'Undefined' will not change the value.
+ * @param {int} [options.outputShiftOpacity=0.7] Strength of masking the shifted pixel. 1.0 means that the full color will be used; anything less will mix-in the original pixel.
  * @param {int} [options.outputBackgroundRed=0] Value to set for red as background. 'Undefined' will not change the value.
@@ -34,6 +38,6 @@ * @param {int} [options.outputBackgroundGreen=0] Value to set for green as background. 'Undefined' will not change the value.
  * @param {int} [options.outputBackgroundAlpha=undefined] Value to set for the alpha channel as background. 'Undefined' will not change the value.
- * @param {int} [options.outputBackgroundOpacity=0.1] Strength of masking the pixel. 1.0 means that the full color will be used; anything less will mix-in the original pixel.
+ * @param {int} [options.outputBackgroundOpacity=0.6] Strength of masking the pixel. 1.0 means that the full color will be used; anything less will mix-in the original pixel.
  * @param {boolean} [options.copyImageAToOutput=true]  Copies the first image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the first image.
  * @param {boolean} [options.copyImageBToOutput=false] Copies the second image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the second image.
- * @param {string[]} [options.filter=[]] Filters that will be applied before the comparison. Available filters are: blur, grayScale, gaussianBlur, lightness, luma, luminosity, sepia
+ * @param {string[]} [options.filter=[]] Filters that will be applied before the comparison. Available filters are: blur, grayScale, lightness, luma, luminosity, sepia
  * @param {boolean} [options.debug=false] When set, then the applied filters will be shown on the output image.
@@ -43,2 +47,5 @@ * @param {boolean} [options.composition=true] Should a composition be created to compare?
  * @param {boolean} [options.composeTopToBottom=false] Create composition from top to bottom, otherwise let it decide on its own whats best
+ * @param {boolean} [options.hideShift=false] Hides shift highlighting by using the background color instead
+ * @param {int} [options.hShift=2] Horizontal shift for possible antialiasing
+ * @param {int} [options.vShift=2] Vertical shift for possible antialiasing
  *
@@ -53,3 +60,2 @@ * @property {PNGImage} _imageA
  * @property {string} _imageOutputPath
- * @property {boolean} _verbose
  * @property {string} _thresholdType
@@ -63,2 +69,7 @@ * @property {int} _threshold
  * @property {int} _outputMaskOpacity
+ * @property {int} _outputShiftRed
+ * @property {int} _outputShiftGreen
+ * @property {int} _outputShiftBlue
+ * @property {int} _outputShiftAlpha
+ * @property {int} _outputShiftOpacity
  * @property {int} _outputBackgroundRed
@@ -76,2 +87,4 @@ * @property {int} _outputBackgroundGreen
  * @property {boolean} _composeTopToBottom
+ * @property {int} _hShift
+ * @property {int} _vShift
  */
@@ -91,4 +104,2 @@ function BlinkDiff (options) {
 
-    this._verbose = options.verbose || false;
-
     // Pixel or Percent
@@ -98,5 +109,5 @@ this._thresholdType = options.thresholdType || BlinkDiff.THRESHOLD_PIXEL;
     // How many pixels different to ignore.
-    this._threshold = options.threshold || 100;
+    this._threshold = options.threshold || 500;
 
-    this._delta = options.delta || 10;
+    this._delta = options.delta || 20;
 
@@ -113,4 +124,19 @@ this._outputMaskRed = options.outputMaskRed || 255;
     this._outputBackgroundAlpha = options.outputBackgroundAlpha;
-    this._outputBackgroundOpacity = options.outputBackgroundOpacity || 0.5;
+    this._outputBackgroundOpacity = options.outputBackgroundOpacity || 0.6;
 
+    if (options.hideShift) {
+        this._outputShiftRed = this._outputBackgroundRed;
+        this._outputShiftGreen = this._outputBackgroundGreen;
+        this._outputShiftBlue = this._outputBackgroundBlue;
+        this._outputShiftAlpha = this._outputBackgroundAlpha;
+        this._outputShiftOpacity = this._outputBackgroundOpacity;
+
+    } else {
+        this._outputShiftRed = options.outputShiftRed || 200;
+        this._outputShiftGreen = options.outputShiftGreen || 100;
+        this._outputShiftBlue = options.outputShiftBlue || 0;
+        this._outputShiftAlpha = options.outputShiftAlpha || 255;
+        this._outputShiftOpacity = options.outputShiftOpacity || 0.7;
+    }
+
     this._copyImageAToOutput = options.copyImageAToOutput || true;
@@ -126,2 +152,5 @@ this._copyImageBToOutput = options.copyImageBToOutput || false;
     this._composeTopToBottom = options.composeTopToBottom || false;
+
+    this._hShift = options.hShift || 2;
+    this._vShift = options.vShift || 2;
 }
@@ -271,2 +300,9 @@
                 },
+                { // Output-Shift color
+                    red: this._outputShiftRed,
+                    green: this._outputShiftGreen,
+                    blue: this._outputShiftBlue,
+                    alpha: this._outputShiftAlpha,
+                    opacity: this._outputShiftOpacity
+                },
                 { // Background color
@@ -278,3 +314,5 @@ red: this._outputBackgroundRed,
                     opacity: this._outputBackgroundOpacity
-                }
+                },
+                this._hShift,
+                this._vShift
             );
@@ -485,29 +523,105 @@
     /**
-     * Calculates the distance of pixels in the 4 dimensional color space
+     * Gets the color of an image by the index
      *
-     * @method _pixelDelta
-     * @param {PNGImage} imageA Source image
-     * @param {PNGImage} imageB Destination image
-     * @param {int} idx Index of pixel in both images
-     * @return {number} Distance
+     * @method _getColor
+     * @param {PNGImage} image Image
+     * @param {int} idx Index of pixel in image
+     * @return {object} Color
      * @private
      */
-    _pixelDelta: function (imageA, imageB, idx) {
-        var color1 = {
-                red: imageA.getRed(idx),
-                green: imageA.getGreen(idx),
-                blue: imageA.getBlue(idx),
-                alpha: imageA.getAlpha(idx)
-            },
-            color2 = {
-                red: imageB.getRed(idx),
-                green: imageB.getGreen(idx),
-                blue: imageB.getBlue(idx),
-                alpha: imageB.getAlpha(idx)
-            };
+    _getColor: function (image, idx) {
+        return {
+            red: image.getRed(idx),
+            green: image.getGreen(idx),
+            blue: image.getBlue(idx),
+            alpha: image.getAlpha(idx)
+        };
+    },
 
-        return this._colorDelta(color1, color2);
+
+    /**
+     * Calculates the lower limit
+     *
+     * @param {int} value
+     * @param {int} min
+     * @param {int} shift
+     * @return {int}
+     * @private
+     */
+    _calculateLowerLimit: function (value, min, shift) {
+        return (value - shift) < min ? -(shift + (value - shift)) : -shift;
     },
 
     /**
+     * Calculates the upper limit
+     *
+     * @param {int} value
+     * @param {int} max
+     * @param {int} shift
+     * @return {int}
+     * @private
+     */
+    _calculateUpperLimit: function (value, max, shift) {
+        return (value + shift) > max ? (max - value) : shift;
+    },
+
+    /**
+     * Checks if any pixel in the shift surrounding has a comparable color
+     *
+     * @param {int} x
+     * @param {int} y
+     * @param {object} color
+     * @param {number} deltaThreshold
+     * @param {PNGImage} imageA
+     * @param {PNGImage} imageB
+     * @param {int} width
+     * @param {int} height
+     * @param {int} hShift
+     * @param {int} vShift
+     * @return {boolean} Is pixel within delta found in surrounding?
+     * @private
+     */
+    _shiftCompare: function (x, y, color, deltaThreshold, imageA, imageB, width, height, hShift, vShift) {
+
+        var i,
+            xOffset, xLow, xHigh,
+            yOffset, yLow, yHigh,
+            delta,
+            color1,
+            color2,
+            localDeltaThreshold;
+
+        if ((hShift > 0) || (vShift > 0)) {
+
+            xLow = this._calculateLowerLimit(x, 0, hShift);
+            xHigh = this._calculateUpperLimit(x, width - 1, hShift);
+
+            yLow = this._calculateLowerLimit(y, 0, vShift);
+            yHigh = this._calculateUpperLimit(y, height - 1, vShift);
+
+            for (xOffset = xLow; xOffset <= xHigh; xOffset++) {
+                for (yOffset = yLow; yOffset <= yHigh; yOffset++) {
+
+                    if ((xOffset != 0) || (yOffset != 0)) {
+
+                        i = imageB.getIndex(x + xOffset, y + yOffset);
+
+                        color1 = this._getColor(imageA, i);
+                        localDeltaThreshold = this._colorDelta(color, color1);
+
+                        color2 = this._getColor(imageB, i);
+                        delta = this._colorDelta(color, color2);
+
+                        if ((Math.abs(delta - localDeltaThreshold) < deltaThreshold) && (localDeltaThreshold > deltaThreshold)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+
+        return false;
+    },
+
+    /**
      * Does a quick comparison between the supplied images
@@ -520,3 +634,4 @@ *
      * @param {number} deltaThreshold
-     * @param {int} dimension Dimensions of the images
+     * @param {int} width Width of image
+     * @param {int} height Height of image
      * @param {object} outputMaskColor
@@ -528,2 +643,8 @@ * @param {int} [outputMaskColor.red]
      * @param {int} [outputMaskColor.opacity]
+     * @param {object} outputShiftColor
+     * @param {int} [outputShiftColor.red]
+     * @param {int} [outputShiftColor.green]
+     * @param {int} [outputShiftColor.blue]
+     * @param {int} [outputShiftColor.alpha]
+     * @param {int} [outputShiftColor.opacity]
      * @param {object} backgroundColor
@@ -535,18 +656,36 @@ * @param {int} [backgroundColor.red]
      * @param {int} [backgroundColor.opacity]
+     * @param {int} [hShift=0] Horizontal shift
+     * @param {int} [vShift=0] Vertical shift
      * @return {int} Number of pixel differences
      * @private
      */
-    _pixelCompare: function (imageA, imageB, imageOutput, deltaThreshold, dimension, outputMaskColor, backgroundColor) {
+    _pixelCompare: function (imageA, imageB, imageOutput, deltaThreshold, width, height, outputMaskColor, outputShiftColor, backgroundColor, hShift, vShift) {
         var difference = 0,
-            i, len,
-            delta;
+            i,
+            x, y,
+            delta,
+            color1, color2;
 
-        for (i = 0, len = dimension; i < len; i++) {
-            delta = this._pixelDelta(imageA, imageB, i);
+        for (x = 0; x < width; x++) {
+            for (y = 0; y < height; y++) {
+                i = imageA.getIndex(x, y);
 
-            if (delta > deltaThreshold) {
-                difference++;
-                imageOutput.setAtIndex(i, outputMaskColor);
-            } else {
-                imageOutput.setAtIndex(i, backgroundColor);
+                color1 = this._getColor(imageA, i);
+                color2 = this._getColor(imageB, i);
+
+                delta = this._colorDelta(color1, color2);
+
+                if (delta > deltaThreshold) {
+
+                    if (this._shiftCompare(x, y, color1, deltaThreshold, imageA, imageB, width, height, hShift, vShift) &&
+                        this._shiftCompare(x, y, color2, deltaThreshold, imageB, imageA, width, height, hShift, vShift)) {
+                        imageOutput.setAtIndex(i, outputShiftColor);
+                    } else {
+                        difference++;
+                        imageOutput.setAtIndex(i, outputMaskColor);
+                    }
+
+                } else {
+                    imageOutput.setAtIndex(i, backgroundColor);
+                }
             }
@@ -572,2 +711,8 @@ }
      * @param {int} [outputMaskColor.opacity]
+     * @param {object} outputShiftColor
+     * @param {int} [outputShiftColor.red]
+     * @param {int} [outputShiftColor.green]
+     * @param {int} [outputShiftColor.blue]
+     * @param {int} [outputShiftColor.alpha]
+     * @param {int} [outputShiftColor.opacity]
      * @param {object} backgroundColor
@@ -579,6 +724,8 @@ * @param {int} [backgroundColor.red]
      * @param {int} [backgroundColor.opacity]
+     * @param {int} [hShift=0] Horizontal shift
+     * @param {int} [vShift=0] Vertical shift
      * @return {object}
      * @private
      */
-    _compare: function (imageA, imageB, imageOutput, deltaThreshold, outputMaskColor, backgroundColor) {
+    _compare: function (imageA, imageB, imageOutput, deltaThreshold, outputMaskColor, outputShiftColor, backgroundColor, hShift, vShift) {
 
@@ -604,5 +751,8 @@ var result = {
             deltaThreshold,
-            result.dimension,
+            result.width,
+            result.height,
             outputMaskColor,
-            backgroundColor
+            outputShiftColor,
+            backgroundColor,
+            hShift, vShift
         );
@@ -609,0 +759,0 @@

package.json

 {
   "name": "blink-diff",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight image comparison tool",
@@ -37,2 +37,3 @@ "license": "MIT",
     "chai": "1.9.1",
+    "coveralls": "2.11.2",
     "istanbul": "0.3.2",
@@ -39,0 +40,0 @@ "mocha": "1.21.4",

README.md

@@ -6,3 +6,28 @@ Blink-Diff
 
+[![Build Status](https://secure.travis-ci.org/yahoo/blink-diff.png)](http://travis-ci.org/yahoo/blink-diff)
+[![npm version](https://badge.fury.io/js/blink-diff.svg)](http://badge.fury.io/js/blink-diff)
 
+[![NPM](https://nodei.co/npm/blink-diff.png?downloads=true)](https://nodei.co/npm/blink-diff/)
+
+
+[API-Documentation](http://yahoo.github.io/blink-diff/docs/)
+
+[Coverage Report](http://yahoo.github.io/blink-diff/coverage/lcov-report/)
+
+
+**Table of Contents**
+* [Installation](#installation)
+* [Usage](#usage)
+    * [Command-Line Usage](#command-line-usage)
+    * [Object Usage](#object-usage)
+    * [Logging](#logging)
+* [Examples](#examples)
+* [Results](#results)
+* [API-Documentation](#api-documentation)
+* [Tests](#tests)
+* [Project Naming](#project-naming)
+* [Third-party libraries](#third-party-libraries)
+* [License](#license)
+
+
 ##Installation
@@ -43,6 +68,6 @@
 ```shell
---verbose           Turn on verbose mode"
+--verbose           Turn on verbose mode
 --threshold p       Number of pixels/percent 'p' below which differences are ignored
 --threshold-type t  'pixel' and 'percent' as type of threshold. (default: pixel)
---delta p           Max. distance colors in the 4 dimensional color-space without triggering a difference.
+--delta p           Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)
 --copyImageA        Copies first image to output as base. (default: true)
@@ -56,2 +81,5 @@ --copyImageB        Copies second image to output as base.
 --compose-ttb       Compose output image from top to bottom
+--hide-shift        Hides shift highlighting (default: true)
+--h-shift           Acceptable horizontal shift of pixel. (default: 0)
+--v-shift           Acceptable vertical shift of pixel. (default: 0)
 --version           Print version
@@ -91,5 +119,5 @@ --help              This help
 * ```thresholdType``` Type of threshold check. This can be BlinkDiff.THRESHOLD_PIXEL and BlinkDiff.THRESHOLD_PERCENT (default: BlinkDiff.THRESHOLD_PIXEL)
-* ```threshold``` Number of pixels/percent p below which differences are ignored (default: 100)
-* ```delta``` Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference. (default: 15)
-* ```outputMaskRed``` Red intensity for the difference highlighting in the output file (default: 255 - full red)
+* ```threshold``` Number of pixels/percent p below which differences are ignored (default: 500)
+* ```delta``` Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference. (default: 20)
+* ```outputMaskRed``` Red intensity for the difference highlighting in the output file (default: 255)
 * ```outputMaskGreen``` Green intensity for the difference highlighting in the output file (default: 0)
@@ -99,14 +127,21 @@ * ```outputMaskBlue``` Blue intensity for the difference highlighting in the output file (default: 0)
 * ```outputMaskOpacity``` Opacity of the pixel for the difference highlighting in the output file (default: 0.7 - slightly transparent)
-* ```outputBackgroundRed``` Red intensity for the background in the output file
-* ```outputBackgroundGreen``` Green intensity for the background in the output file
-* ```outputBackgroundBlue``` Blue intensity for the background in the output file
-* ```outputBackgroundAlpha``` Alpha intensity for the background in the output file
-* ```outputMaskOpacity``` Opacity of the pixel for the background in the output file (default: 0.5 - transparent)
+* ```outputShiftRed``` Red intensity for the shift highlighting in the output file (default: 255)
+* ```outputShiftGreen``` Green intensity for the shift highlighting in the output file (default: 165)
+* ```outputShiftBlue``` Blue intensity for the shift highlighting in the output file (default: 0)
+* ```outputShiftAlpha``` Alpha intensity for the shift highlighting in the output file (default: 255)
+* ```outputShiftOpacity``` Opacity of the pixel for the shift highlighting in the output file (default: 0.7 - slightly transparent)
+* ```outputBackgroundRed``` Red intensity for the background in the output file (default: 0)
+* ```outputBackgroundGreen``` Green intensity for the background in the output file (default: 0)
+* ```outputBackgroundBlue``` Blue intensity for the background in the output file (default: 0)
+* ```outputBackgroundAlpha``` Alpha intensity for the background in the output file (default: undefined)
+* ```outputMaskOpacity``` Opacity of the pixel for the background in the output file (default: 0.6 - transparent)
 * ```copyImageAToOutput``` Copies the first image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the first image. (default)
 * ```copyImageBToOutput``` Copies the second image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the second image.
-* ```filter``` Filters that will be applied before the comparison. Available filters are: blur, grayScale, gaussianBlur, lightness, luma, luminosity, sepia
-* ```debug``` When set, then the applied filters will be shown on the output image.
-* ```createComparison``` Creates a composition of all three images as output
+* ```filter``` Filters that will be applied before the comparison. Available filters are: blur, grayScale, lightness, luma, luminosity, sepia
+* ```debug``` When set, then the applied filters will be shown on the output image. (default: false)
+* ```createComparison``` Creates a composition of all three images as output (default: true)
 * ```compareLeftToRight``` Creates comparison-composition from left to right, otherwise it lets decide the app on what is best
 * ```compareTopToBottom``` Creates comparison-composition from top to bottom, otherwise it lets decide the app on what is best
+* ```hShift``` Horizontal shift for possible antialiasing (default: 2)
+* ```vShift``` Vertical shift for possible antialiasing (default: 2)
 
@@ -131,3 +166,3 @@
 
-##Example
+##Examples
 
@@ -144,2 +179,5 @@ There are some examples in the ```examples``` folder, in which I used screenshots of Wikipedia to check for visual regressions (and made some manual modifications to the dom).
 
+##Results
+![Conversion](https://raw.githubusercontent.com/yahoo/blink-diff/master/images/conversion.png)
+
 ##API-Documentation
@@ -161,2 +199,6 @@
 
+
+##Project Naming
+The name comes from the Blink comparator that was used in Astronomy to recognize differences in multiple photos, taking a picture of the same area in the sky over consecutive days, months, or years. Most notably, it was used to discover Pluto.
+
 ##Third-party libraries
@@ -163,0 +205,0 @@

No alert changes

Improved metrics

Total package byte prevSize

455310

increased by1147.12%

Number of package files

9

increased by28.57%

Lines of code

661

increased by24.48%

Number of lines in readme file

215

increased by24.28%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes