Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

Commit

Permalink
Merge a3fed44 into 6441408
Browse files Browse the repository at this point in the history
  • Loading branch information
@josieoharrow
josieoharrow committed Aug 15, 2018
2 parents 6441408 + a3fed44 commit acd25fa
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 52 deletions.
67 changes: 47 additions & 20 deletions README.md
View file
Expand Up @@ -76,27 +76,54 @@ Only PNGs are supported at this point.

The command-line tool exposes a couple of flags and parameters for the comparison:
```
--verbose Turn on verbose mode
--debug Turn on debug mode - leaving all filters and modifications on the result
--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. (default: 20)
--copyImageA Copies first image to output as base. (default: true)
--copyImageB Copies second image to output as base.
--no-copy Doesn't copy anything to output as base.
--output o Write difference to the file 'o'
--filter f Filters f (separated with comma) that will be applied before the comparison.
--no-composition Turns the composition feature off
--compose-ltr Compose output image from left to right
--compose-ttb Compose output image from top to bottom
--hide-shift Hides shift highlighting (default: false)
--h-shift Acceptable horizontal shift of pixel. (default: 0)
--v-shift Acceptable vertical shift of pixel. (default: 0)
--block-out x,y,w,h Block-out area. Can be repeated multiple times.
--version Print version
--help This help
--verbose Turn on verbose mode
--debug Turn on debug mode - leaving all filters and modifications on the result
--threshold p Number of pixels/percent 'p' below which differences are ignored. (default: 500 pixels)
--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. (default: 40)
--gamma e Base Gamma correction exponent e. (default: 1.0)
--gammaR e Gamma correction exponent e for red
--gammaG e Gamma correction exponent e for green
--gammaB e Gamma correction exponent e for blue
--copyImageA Copies first image to output as base. (default: true)
--copyImageB Copies second image to output as base.
--no-copy Doesn't copy anything to output as base.
--output o Write difference to the file 'o'
--filter f Filters f (separated with comma) that will be applied before the comparison.
--no-composition Turns the composition feature off
--compose-ltr Compose output image from left to right
--compose-ttb Compose output image from top to bottom
--hide-shift Hides shift highlighting (default: false)
--h-shift Acceptable horizontal shift of pixel. (default: 0)
--v-shift Acceptable vertical shift of pixel. (default: 0)
--block-out x,y,w,h Block-out area. Can be repeated multiple times.
--blockOutOpacity d Block-out opacity. (default: 1)")
--blockOutOutputOpacity d Block-out output opacity (doesn't affect comparison) (default: 1.0)
--version Print version
--help This help
```

###For Vernier

Added on Vernier's fork are additional features from the object usage for use within the command-line tool.
The purpose of this fork is to use blink-diff for QA testing of images.

**New flags:**

Color filtering: When testing for color differences, blink-diff applies an algorithm to calculate the distance between colors in 4D color space. The steps for this conversion are RGB[0-255] to RGB[0-1], RGB-1 to XYZ, and XYZ to CIELAB. If the gamma
flag is used, the gamma exponent is applied to the R, G, or B values after they are converted to 0-1. The result of that is that the changed values decrease to be exponentially smaller, as does the differences between them. This makes it more
likely they will meet the default 20 unit distance threshold for color differences used by blink-diff.
* ```gamma```
* ```gammaR```
* ```gammaG```
* ```gammaB```

Compare filtering: This flag adjusts the opacity of block-out filters, which are applied to images pre-comparison. Higher the opacity means fewer differences will be yielded in that region.
* ```blockOutOpacity```

Output adjustments: This doesn't have any effect on the comparison of images. This feature was added explicitly to the Vernier fork to allow for more verbose output data; it allows users to see block-out regions while still being able to adjust
opacity and see the elements underneath from the compared images.
* ```blockOutOutputOpacity```

###Object usage

Expand Down Expand Up @@ -169,7 +196,7 @@ All the parameters that were available in the command-line tool are also availab
* ```cropImageA``` Cropping for first image (default: no cropping) - Format: { x:<int>, y:<int>, width:<int>, height:<int> }
* ```cropImageB``` Cropping for second image (default: no cropping) - Format: { x:<int>, y:<int>, width:<int>, height:<int> }
* ```perceptual``` Turn the perceptual comparison mode on. See below for more information.
* ```gamma``` Gamma correction for all colors (will be used as base) (default: none) - Any value here will turn the perceptual comparison mode on
* ```gamma``` Gamma correction for all colors (will be used as base) (default: none) - Any value here will turn the perceptual comparison mode on. (default: 1.0)
* ```gammaR``` Gamma correction for red - Any value here will turn the perceptual comparison mode on
* ```gammaG``` Gamma correction for green - Any value here will turn the perceptual comparison mode on
* ```gammaB``` Gamma correction for blue - Any value here will turn the perceptual comparison mode on
Expand Down
96 changes: 76 additions & 20 deletions bin/blink-diff
View file
Expand Up @@ -75,25 +75,31 @@ function printHelp () {
console.log(" Compares image1 and image2.");
console.log("");
console.log(" Options:");
console.log(" --verbose Turn on verbose mode");
console.log(" --debug Turn on debug mode - leaving all filters and modifications on the result");
console.log(" --threshold p Number of pixels/percent 'p' below which differences are ignored");
console.log(" --threshold-type t 'pixel' and 'percent' as type of threshold. (default: pixel)");
console.log(" --delta p Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)");
console.log(" --copyImageA Copies first image to output as base. (default: true)");
console.log(" --copyImageB Copies second image to output as base.");
console.log(" --no-copy Doesn't copy anything to output as base.");
console.log(" --output o Write difference to the file 'o'");
console.log(" --filter f Filters f (separated with comma) that will be applied before the comparison.");
console.log(" --no-composition Turns the composition feature off");
console.log(" --compose-ltr Compose output image from left to right");
console.log(" --compose-ttb Compose output image from top to bottom");
console.log(" --hide-shift Hides shift highlighting (default: false)");
console.log(" --h-shift Acceptable horizontal shift of pixel. (default: 0)");
console.log(" --v-shift Acceptable vertical shift of pixel. (default: 0)");
console.log(" --block-out x,y,w,h Block-out area. Can be repeated multiple times.");
console.log(" --version Print version");
console.log(" --help This help");
console.log(" --verbose Turn on verbose mode");
console.log(" --debug Turn on debug mode - leaving all filters and modifications on the result");
console.log(" --threshold p Number of pixels/percent 'p' below which differences are ignored");
console.log(" --threshold-type t 'pixel' and 'percent' as type of threshold. (default: pixel)");
console.log(" --delta p Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)");
console.log(" --gamma e Base Gamma correction exponent e");
console.log(" --gammaR e Gamma correction exponent e for red");
console.log(" --gammaG e Gamma correction exponent e for green");
console.log(" --gammaB e Gamma correction exponent e for blue");
console.log(" --copyImageA Copies first image to output as base. (default: true)");
console.log(" --copyImageB Copies second image to output as base.");
console.log(" --no-copy Doesn't copy anything to output as base.");
console.log(" --output o Write difference to the file 'o'");
console.log(" --filter f Filters f (separated with comma) that will be applied before the comparison.");
console.log(" --no-composition Turns the composition feature off");
console.log(" --compose-ltr Compose output image from left to right");
console.log(" --compose-ttb Compose output image from top to bottom");
console.log(" --hide-shift Hides shift highlighting (default: false)");
console.log(" --h-shift Acceptable horizontal shift of pixel. (default: 0)");
console.log(" --v-shift Acceptable vertical shift of pixel. (default: 0)");
console.log(" --block-out x,y,w,h Block-out area. Can be repeated multiple times.");
console.log(" --blockOutOpacity d Block-out opacity. (default: 1)");
console.log(" --blockOutOutputOpacity d Block-out output opacity (doesn't affect comparison) (default: 1.0)");
console.log(" --version Print version");
console.log(" --help This help");
console.log("");
}

Expand Down Expand Up @@ -144,6 +150,16 @@ function parseArgs (argv) {
} else if (argv[i] == "--hide-shift") {
options.hideShift = true;

} else if (argv[i] == "--blockOutOutputOpacity") {
if (++i < argLength) {

temporary = parseFloat(argv[i]);
if (temporary < 0 || temporary > 1) {
throw new Error("--blockOutOutputOpacity must be value between 0 and 1.");
}
options.blockOutOutputOpacity = temporary;
}

} else if (argv[i] == "--copyImageA") {
options.copyImageAToOutput = true;
options.copyImageBToOutput = false;
Expand Down Expand Up @@ -185,6 +201,46 @@ function parseArgs (argv) {
options.hShift = temporary;
}

} else if (argv[i] == "--gamma") {
if (++i < argLength) {

temporary = parseFloat(argv[i]);
if (temporary < 0) {
throw new Error("--gamma must be positive");
}
options.gamma = temporary;
}

} else if (argv[i] == "--gammaR") {
if (++i < argLength) {

temporary = parseFloat(argv[i]);
if (temporary < 0) {
throw new Error("--gammaR must be positive");
}
options.gammaR = temporary;
}

} else if (argv[i] == "--gammaG") {
if (++i < argLength) {

temporary = parseFloat(argv[i]);
if (temporary < 0) {
throw new Error("--gammaG must be positive");
}
options.gammaG = temporary;
}

} else if (argv[i] == "--gammaB") {
if (++i < argLength) {

temporary = parseFloat(argv[i]);
if (temporary < 0) {
throw new Error("--gammaB must be positive");
}
options.gammaB = temporary;
}

} else if (argv[i] == "--v-shift") {
if (++i < argLength) {

Expand Down Expand Up @@ -257,4 +313,4 @@ function parseArgs (argv) {
}

return options;
}
}
40 changes: 28 additions & 12 deletions index.js
View file
Expand Up @@ -22,7 +22,7 @@ function load(value, defaultValue) {
* @param {string} [options.imageOutputPath=undefined] Path to output image file
* @param {int} [options.imageOutputLimit=BlinkDiff.OUTPUT_ALL] Determines when an image output is created
* @param {string} [options.thresholdType=BlinkDiff.THRESHOLD_PIXEL] Defines the threshold of the comparison
* @param {int} [options.threshold=500] Threshold limit according to the comparison limit.
* @param {int} [options.threshold=100] 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.
* @param {int} [options.outputMaskGreen=0] Value to set for green on difference pixel. 'Undefined' will not change the value.
Expand Down Expand Up @@ -53,6 +53,7 @@ function load(value, defaultValue) {
* @param {boolean} [options.composeLeftToRight=false] Create composition from left to right, otherwise let it decide on its own whats best
* @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 {float} [options.blockOutOutputOpacity=1.0]
* @param {int} [options.hShift=2] Horizontal shift for possible antialiasing
* @param {int} [options.vShift=2] Vertical shift for possible antialiasing
* @param {object} [options.cropImageA=null] Cropping for first image (default: no cropping)
Expand Down Expand Up @@ -93,6 +94,7 @@ function load(value, defaultValue) {
* @property {int} _outputShiftBlue
* @property {int} _outputShiftAlpha
* @property {float} _outputShiftOpacity
* @property {float} _blockOutOutputOpacity
* @property {int} _outputBackgroundRed
* @property {int} _outputBackgroundGreen
* @property {int} _outputBackgroundBlue
Expand Down Expand Up @@ -196,7 +198,6 @@ function BlinkDiff (options) {
this._filter = load(options.filter, []);

this._debug = load(options.debug, false);

this._composition = load(options.composition, true);
this._composeLeftToRight = load(options.composeLeftToRight, false);
this._composeTopToBottom = load(options.composeTopToBottom, false);
Expand All @@ -207,6 +208,8 @@ function BlinkDiff (options) {
this._cropImageA = options.cropImageA;
this._cropImageB = options.cropImageB;

this._blockOutOutputOpacity = load(options.blockOutOutputOpacity, 1.0);

// Prepare reference white
this._refWhite = this._convertRgbToXyz({c1: 1, c2: 1, c3: 1, c4: 1});

Expand Down Expand Up @@ -400,6 +403,15 @@ BlinkDiff.prototype = {
alpha: this._blockOutAlpha,
opacity: this._blockOutOpacity
};

outputOpacityColor = {
red: this._blockOutRed,
green: this._blockOutGreen,
blue: this._blockOutBlue,
alpha: this._blockOutAlpha,
opacity: this._blockOutOutputOpacity
};

for (i = 0, len = this._blockOut.length; i < len; i++) {
rect = this._blockOut[i];

Expand All @@ -408,13 +420,18 @@ BlinkDiff.prototype = {

this._imageACompare.fillRect(rect.x, rect.y, rect.width, rect.height, color);
this._imageBCompare.fillRect(rect.x, rect.y, rect.width, rect.height, color);

if (this._blockOutOutputOpacity != 1.0) {
this._imageA.fillRect(rect.x, rect.y, rect.width, rect.height, outputOpacityColor);
this._imageB.fillRect(rect.x, rect.y, rect.width, rect.height, outputOpacityColor);
}
}

// Copy image to composition
if (this._copyImageAToOutput) {
this._copyImage(this._debug ? this._imageACompare : this._imageA, this._imageOutput);
this._copyImage((this._debug || this._blockOutOutputOpacity != 1.0) ? this._imageACompare : this._imageA, this._imageOutput);
} else if (this._copyImageBToOutput) {
this._copyImage(this._debug ? this._imageBCompare : this._imageB, this._imageOutput);
this._copyImage((this._debug || this._blockOutOutputOpacity != 1.0)? this._imageBCompare : this._imageB, this._imageOutput);
}

// Apply all filters
Expand Down Expand Up @@ -529,7 +546,6 @@ BlinkDiff.prototype = {
};
for (i = 0, len = this._blockOut.length; i < len; i++) {
rect = this._blockOut[i];

// Make sure the block-out parameters fit
this._correctDimensions(this._imageACompare.getWidth(), this._imageACompare.getHeight(), rect);

Expand Down Expand Up @@ -930,15 +946,15 @@ BlinkDiff.prototype = {
c1: color.c1 / 255, c2: color.c2 / 255, c3: color.c3 / 255, c4: color.c4
};

if (gamma || gamma.R !== undefined || gamma.G !== undefined || gamma.B !== undefined) {
if (gamma.R !== undefined) {
result.c1 = Math.pow(result.c1, gamma.R);
if (gamma || gamma.r !== undefined || gamma.g !== undefined || gamma.g !== undefined) {
if (gamma.r !== undefined) {
result.c1 = Math.pow(result.c1, gamma.r);
}
if (gamma.G !== undefined) {
result.c2 = Math.pow(result.c2, gamma.G);
if (gamma.g !== undefined) {
result.c2 = Math.pow(result.c2, gamma.g);
}
if (gamma.B !== undefined) {
result.c3 = Math.pow(result.c3, gamma.B);
if (gamma.b !== undefined) {
result.c3 = Math.pow(result.c3, gamma.b);
}
}

Expand Down

0 comments on commit acd25fa

Please sign in to comment.