From 0dae96a6ae78b61430d47ebd454e0018c719693d Mon Sep 17 00:00:00 2001 From: Chris Deely Date: Thu, 19 Oct 2017 21:06:29 -0400 Subject: [PATCH] fix #10 with the addition of a `transparency` option to control the alpha of unchanged pixels --- README.md | 3 ++- index.js | 6 +++-- lib/png.js | 10 ++++---- lib/same-colors.js | 3 ++- test/data/diffs/different-0-alpha.png | Bin 0 -> 562 bytes test/data/diffs/different-50-alpha.png | Bin 0 -> 597 bytes test/test.js | 32 +++++++++++++++++++++++++ 7 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 test/data/diffs/different-0-alpha.png create mode 100644 test/data/diffs/different-50-alpha.png diff --git a/README.md b/README.md index e66e5e0..3e207e5 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,8 @@ looksSame.createDiff({ current: '/path/to/current/image.png', diff: '/path/to/save/diff/to.png', highlightColor: '#ff00ff', //color to highlight the differences - strict: false,//strict comparsion + transparency: 255, //0-255, controls the alpha channel for unchanged pixels + strict: false,//strict comparison tolerance: 2.5 }, function(error) { }); diff --git a/index.js b/index.js index f340366..2a7797e 100644 --- a/index.js +++ b/index.js @@ -144,6 +144,7 @@ const buildDiffImage = (png1, png2, options, callback) => { const minWidth = Math.min(png1.width, png2.width); const minHeight = Math.min(png1.height, png2.height); const highlightColor = options.highlightColor; + const alphaLevel = isNaN(options.transparency) ? 255 : options.transparency; const result = png.empty(width, height); iterateRect(width, height, (x, y) => { @@ -158,7 +159,7 @@ const buildDiffImage = (png1, png2, options, callback) => { if (!options.comparator({color1, color2})) { result.setPixel(x, y, highlightColor); } else { - result.setPixel(x, y, color1); + result.setPixel(x, y, color1, alphaLevel); } }, () => callback(result)); }; @@ -216,7 +217,8 @@ exports.createDiff = function saveDiff(opts, callback) { const diffOptions = { highlightColor: parseColorString(opts.highlightColor), - comparator: opts.strict ? areColorsSame : makeCIEDE2000Comparator(tolerance) + comparator: opts.strict ? areColorsSame : makeCIEDE2000Comparator(tolerance), + transparency: opts.transparency }; buildDiffImage(result.first, result.second, diffOptions, (result) => { diff --git a/lib/png.js b/lib/png.js index 0210977..a5e85a7 100644 --- a/lib/png.js +++ b/lib/png.js @@ -26,7 +26,8 @@ class PNGImage { return { R: this._png.data[idx], G: this._png.data[idx + 1], - B: this._png.data[idx + 2] + B: this._png.data[idx + 2], + A: this._png.data[idx + 3] }; } @@ -34,14 +35,15 @@ class PNGImage { * Sets color data to pixel with given coordinates * @param {Number} x coordinate * @param {Number} y coordinate - * @param {Object} color + * @param {Object} color RGB formatted color {R:0-255, G:0-255, B:0-255} + * @param {Number} [alpha=255] A level to set for the alpha channel, 0-255 */ - setPixel(x, y, color) { + setPixel(x, y, color, alpha) { const idx = this._getIdx(x, y); this._png.data[idx] = color.R; this._png.data[idx + 1] = color.G; this._png.data[idx + 2] = color.B; - this._png.data[idx + 3] = 255; + this._png.data[idx + 3] = isNaN(alpha) ? 255 : alpha; } /** diff --git a/lib/same-colors.js b/lib/same-colors.js index 6ab970e..10fc11c 100644 --- a/lib/same-colors.js +++ b/lib/same-colors.js @@ -6,5 +6,6 @@ module.exports = (data) => { return c1.R === c2.R && c1.G === c2.G - && c1.B === c2.B; + && c1.B === c2.B + && c1.A === c2.A; }; diff --git a/test/data/diffs/different-0-alpha.png b/test/data/diffs/different-0-alpha.png new file mode 100644 index 0000000000000000000000000000000000000000..8e3b726e54d64343bc9bd4542141a317b7f2eb9e GIT binary patch literal 562 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-#^NA%Cx&(BWL^T}FfdWk9dNvV1jxdlK~3=B3ERzPNMYDuC(MQ%=Bu~mhw5?F;5kPQ;nS5g2gDap1~ zitr6kaLzAERWQ{v(KAr8<5EyiuqjGOvkG!?gK7uzY?U%fN(!v>^~=l4^~#O)@{7{- z4J|D#^$m>ljf`}GDs+o0^GXscbn}XpA%?)raY-#sF3Kz@$;{7F0GXSZlwVq6tE2?7 z2o50bEXhnm*pycc^%l^B`XCv7Lp=k1xYwo;fnwhr7vWw(ZuJ>>5Gy0I|;BNP%;^=|og#F1yO`O(6PF*MSHz=Qs zaA@Uu;i18!;mK?@sfRV>M8p4y0TKa|*xq;;i3KP!TM2P7dtGYS9R}u=sfe&mS;8pm ed5lRb}FfdWk9dNvV1jxdlK~3=B3ERzPNMYDuC(MQ%=Bu~mhw5?F;5kPQ;nS5g2gDap1~ zitr6kaLzAERWQ{v(KAr8<5EyiuqjGOvkG!?gK7uzY?U%fN(!v>^~=l4^~#O)@{7{- z4J|D#^$m>ljf`}GDs+o0^GXscbn}XpA%?)raY-#sF3Kz@$;{7F0GXSZlwVq6tE2?7 z2o50bEXhnm*pycc^%l^B`XCv7Lp=k1xY$bwTYck5fvxg@sk znR8<5r!^%~rHRj>Om33R)x8*l}d2H+Q zh2v%H)@g4Hb{UXkK-Bt`w^5gEmc61v}_ER?=Q8K_jTupOyvVLKvoP_R&Lp&}3i zX&`$&tMelF1cx_UGaT;x{nW8VseHeR&NGhAV;P0(Ta_QZ6K`|rKhSW5e*?3Ib=-Wj Qx1a>z>FVdQ&MBb@02LC=S^xk5 literal 0 HcmV?d00001 diff --git a/test/test.js b/test/test.js index 454010c..3aa1f6c 100644 --- a/test/test.js +++ b/test/test.js @@ -296,6 +296,38 @@ describe('createDiff', () => { }); }); + it('should apply full transparency to the diff if set to 0', (done) => { + const _this = this; + looksSame.createDiff({ + reference: srcPath('ref.png'), + current: srcPath('different.png'), + diff: this.tempName, + highlightColor: '#ff00ff', + transparency: 0 + }, () => { + looksSame(imagePath('diffs/different-0-alpha.png'), _this.tempName, {strict: true}, (error, equal) => { + expect(equal).to.equal(true); + done(); + }); + }); + }); + + it('should support partial transparency in the diff', (done) => { + const _this = this; + looksSame.createDiff({ + reference: srcPath('ref.png'), + current: srcPath('different.png'), + diff: this.tempName, + highlightColor: '#ff00ff', + transparency: 50 + }, () => { + looksSame(imagePath('diffs/different-50-alpha.png'), _this.tempName, {strict: true}, (error, equal) => { + expect(equal).to.equal(true); + done(); + }); + }); + }); + it('should allow to build diff for taller images', (done) => { const _this = this; looksSame.createDiff({