Skip to content

Commit

Permalink
Replaces lightness and rgb options with lightboost and diffColor (PR …
Browse files Browse the repository at this point in the history 
…52#issuecomment-101045835)
  • Loading branch information
@B2F
B2F committed May 14, 2015
1 parent 54fe17a commit 491f867
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 58 deletions.
43 changes: 19 additions & 24 deletions imagediff.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,9 @@
for (i = 0; i < length; i += 4) {
var pixelA = Array.prototype.slice.call(aData, i, i+3);
var pixelB = Array.prototype.slice.call(bData, i, i+3);
var diffPixel = diffPixels(pixelA, pixelB, options);
var pixelC = diffPixels(pixelA, pixelB, options);
for (var rgbIndex = 0; rgbIndex < 4; rgbIndex++) {
cData[i+rgbIndex] = diffPixel[rgbIndex];
cData[i+rgbIndex] = pixelC[rgbIndex];
}
}

Expand Down Expand Up @@ -244,9 +244,9 @@
j = 4 * (row * b.width + column);
var pixelA = Array.prototype.slice.call(cData, i, i+3);
var pixelB = Array.prototype.slice.call(bData, j, j+3);
var diffPixel = diffPixels(pixelA, pixelB, options);
var pixelC = diffPixels(pixelA, pixelB, options);
for (var rgbIndex = 0; rgbIndex < 4; rgbIndex++) {
cData[i+rgbIndex] = diffPixel[rgbIndex];
cData[i+rgbIndex] = pixelC[rgbIndex];
}
}
}
Expand All @@ -267,37 +267,32 @@

/**
* Differentiates two rgb pixels by subtracting color values.
* The light value for each color marks the difference gap.
* @see https://github.com/HumbleSoftware/js-imagediff/pull/52
*
* @see https://github.com/HumbleSoftware/js-imagediff/issues/34
* @param {Object} options
* options.lightness: light added to color value, increasing differences visibility
* options.rgb : array used to specify rgb balance instead of lightness
* options.stack: stack differences on top of the original image, preserving common pixels
* options.lightboost: increases differences visibility with a light boost.
* options.diffColor: a rgb array used to specify differences color instead of light gap.
* options.stack: stacks differences on top of the original image, preserving common pixels.
*
* @returns {Array} pixel rgba values between 0 and 255.
*/
function diffPixels(pixelA, pixelB, options) {
var lightness = options && options.lightness || 25;
if (options && options.lightness === 0) lightness = 0;
var diffColor = options && options.rgb || [lightness,lightness,lightness];
var stack = options && options.stack;
// diffPixel = [r,g,b,a]
var diffPixel = [0,0,0,255];
var lightboost = options && options.lightboost || 0;
var diffColor = options && options.diffColor || false;
var stack = options && options.stack || false;
// pixel = [r,g,b,a]
var pixelC = [0,0,0,255];
for (var rgbIndex = 0; rgbIndex < 3 ; rgbIndex++) {
diffPixel[rgbIndex] = Math.abs(pixelA[rgbIndex] - pixelB[rgbIndex]);
if (diffPixel[rgbIndex] > 0) {
// Optionally colors area of difference, adds visibility with lightness.
diffPixel[rgbIndex] += diffColor[rgbIndex];
diffPixel[rgbIndex] = Math.min(diffPixel[rgbIndex], 255);
pixelC[rgbIndex] = Math.abs(pixelA[rgbIndex] - pixelB[rgbIndex]);
if (pixelC[rgbIndex] > 0) {
if (diffColor) pixelC[rgbIndex] = diffColor[rgbIndex];
pixelC[rgbIndex] = Math.min(pixelC[rgbIndex] + lightboost, 255);
}
else if (stack) {
// If options.stack and no pixel differences are found,
// print original pixel instead of a black (0) pixel.
diffPixel[rgbIndex] = pixelA[rgbIndex];
pixelC[rgbIndex] = pixelA[rgbIndex];
}
}
return diffPixel;
return pixelC;
}

// Validation
Expand Down
43 changes: 19 additions & 24 deletions js/imagediff.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,9 +189,9 @@
for (i = 0; i < length; i += 4) {
var pixelA = Array.prototype.slice.call(aData, i, i+3);
var pixelB = Array.prototype.slice.call(bData, i, i+3);
var diffPixel = diffPixels(pixelA, pixelB, options);
var pixelC = diffPixels(pixelA, pixelB, options);
for (var rgbIndex = 0; rgbIndex < 4; rgbIndex++) {
cData[i+rgbIndex] = diffPixel[rgbIndex];
cData[i+rgbIndex] = pixelC[rgbIndex];
}
}

Expand Down Expand Up @@ -237,9 +237,9 @@
j = 4 * (row * b.width + column);
var pixelA = Array.prototype.slice.call(cData, i, i+3);
var pixelB = Array.prototype.slice.call(bData, j, j+3);
var diffPixel = diffPixels(pixelA, pixelB, options);
var pixelC = diffPixels(pixelA, pixelB, options);
for (var rgbIndex = 0; rgbIndex < 4; rgbIndex++) {
cData[i+rgbIndex] = diffPixel[rgbIndex];
cData[i+rgbIndex] = pixelC[rgbIndex];
}
}
}
Expand All @@ -260,37 +260,32 @@

/**
* Differentiates two rgb pixels by subtracting color values.
* The light value for each color marks the difference gap.
* @see https://github.com/HumbleSoftware/js-imagediff/pull/52
*
* @see https://github.com/HumbleSoftware/js-imagediff/issues/34
* @param {Object} options
* options.lightness: light added to color value, increasing differences visibility
* options.rgb : array used to specify rgb balance instead of lightness
* options.stack: stack differences on top of the original image, preserving common pixels
* options.lightboost: increases differences visibility with a light boost.
* options.diffColor: a rgb array used to specify differences color instead of light gap.
* options.stack: stacks differences on top of the original image, preserving common pixels.
*
* @returns {Array} pixel rgba values between 0 and 255.
*/
function diffPixels(pixelA, pixelB, options) {
var lightness = options && options.lightness || 25;
if (options && options.lightness === 0) lightness = 0;
var diffColor = options && options.rgb || [lightness,lightness,lightness];
var stack = options && options.stack;
// diffPixel = [r,g,b,a]
var diffPixel = [0,0,0,255];
var lightboost = options && options.lightboost || 0;
var diffColor = options && options.diffColor || false;
var stack = options && options.stack || false;
// pixel = [r,g,b,a]
var pixelC = [0,0,0,255];
for (var rgbIndex = 0; rgbIndex < 3 ; rgbIndex++) {
diffPixel[rgbIndex] = Math.abs(pixelA[rgbIndex] - pixelB[rgbIndex]);
if (diffPixel[rgbIndex] > 0) {
// Optionally colors area of difference, adds visibility with lightness.
diffPixel[rgbIndex] += diffColor[rgbIndex];
diffPixel[rgbIndex] = Math.min(diffPixel[rgbIndex], 255);
pixelC[rgbIndex] = Math.abs(pixelA[rgbIndex] - pixelB[rgbIndex]);
if (pixelC[rgbIndex] > 0) {
if (diffColor) pixelC[rgbIndex] = diffColor[rgbIndex];
pixelC[rgbIndex] = Math.min(pixelC[rgbIndex] + lightboost, 255);
}
else if (stack) {
// If options.stack and no pixel differences are found,
// print original pixel instead of a black (0) pixel.
diffPixel[rgbIndex] = pixelA[rgbIndex];
pixelC[rgbIndex] = pixelA[rgbIndex];
}
}
return diffPixel;
return pixelC;
}

// Validation
Expand Down
20 changes: 10 additions & 10 deletions spec/ImageDiffSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ describe('ImageUtils', function() {
a.data[1] = 200,
b = imagediff.createImageData(1, 1),
b.data[1] = 158,
c = imagediff.diff(a, b, {lightness: 0}),
c = imagediff.diff(a, b),

d = imagediff.createImageData(1, 1);
d.data[1] = 42;
Expand All @@ -325,16 +325,16 @@ describe('ImageUtils', function() {
expect(c).toImageDiffEqual(d);
});

it('should calculate difference with adjusted lightness', function () {
it('should calculate color difference with adjusted lightness', function () {
a = imagediff.createImageData(1, 1),
a.data[1] = 200;
b = imagediff.createImageData(1, 1),
b.data[1] = 158;
c = imagediff.diff(a, b);
c = imagediff.diff(a, b, {lightboost: 155});

d = imagediff.createImageData(1, 1);
// 42 + 25 (default increased lightness)
d.data[1] = 67;
// a-b + 155
d.data[1] = 197;
d.data[3] = 255;

expect(c).toImageDiffEqual(d);
Expand All @@ -344,7 +344,7 @@ describe('ImageUtils', function() {
a = imagediff.createImageData(3, 3),
b = imagediff.createImageData(1, 1),
b.data[1] = 21;
c = imagediff.diff(a, b, {lightness: 0});
c = imagediff.diff(a, b);

d = imagediff.createImageData(3, 3);
// 4 * (rowPos * imageWidth + columnPos) + rgbPos
Expand All @@ -363,7 +363,7 @@ describe('ImageUtils', function() {
a = imagediff.createImageData(3, 3),
b = imagediff.createImageData(1, 1),
b.data[1] = 21;
c = imagediff.diff(a, b, {lightness: 0, align: 'top'});
c = imagediff.diff(a, b, {align: 'top'});

d = imagediff.createImageData(3, 3);
d.data[1] = 21;
Expand All @@ -384,12 +384,12 @@ describe('ImageUtils', function() {
Array.prototype.forEach.call(b.data, function (value, i) {
b.data[i] = 125;
});
c = imagediff.diff(a, b, {rgb: [255,0,255]});
c = imagediff.diff(a, b, {diffColor: [255,0,44], lightboost: 191});

d = imagediff.createImageData(1, 1);
d.data[0] = 255;
d.data[1] = 125;
d.data[2] = 255;
d.data[1] = 191;
d.data[2] = 235;
d.data[3] = 255;

expect(c).toImageDiffEqual(d);
Expand Down

0 comments on commit 491f867

Please sign in to comment.