From 89656127d4bf795018bf2344ce6016ce8e9fcb4b Mon Sep 17 00:00:00 2001 From: Chris Deely <chris@webdeely.com> 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 | 3 ++- 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 | 30 +++++++++++++++++++++++++ 6 files changed, 36 insertions(+), 3 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 922314e..45d21a3 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,8 @@ await 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, antialiasingTolerance: 0, ignoreAntialiasing: true, // ignore antialising by default diff --git a/index.js b/index.js index 0566ab6..24c7d65 100644 --- a/index.js +++ b/index.js @@ -77,6 +77,7 @@ const buildDiffImage = async (img1, img2, options) => { const minHeight = Math.min(img1.height, img2.height); const highlightColor = options.highlightColor; + const alphaLevel = isNaN(options.transparency) ? 255 : options.transparency; const resultBuffer = Buffer.alloc(width * height * 3); const setPixel = (buf, x, y, {R, G, B}) => { @@ -98,7 +99,7 @@ const buildDiffImage = async (img1, img2, options) => { if (!options.comparator({color1, color2, img1, img2, x, y, width, height})) { setPixel(resultBuffer, x, y, highlightColor); } else { - setPixel(resultBuffer, x, y, color1); + setPixel(resultBuffer, x, y, color1, alphaLevel); } }); 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<k(nV8B@w<p zR>}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<ChHXu<e|Dw!Ppv@rj?F?<eDpACs_Sooy zEJtz-#HV0UpjYj<Z1my5X2<1oNIeo5lI@-@jv*PWZ?8LYH5iC6U%dAF{?FCo1&`A- z&aV|Y#;I7U>wo;fnwhr7vWw(ZuJ>>5Gy0I|;BNP%;^=|og#F1yO`O(6PF*MSHz=Qs zaA@Uu;i18!;mK?@sfRV>M8p4y0TKa|*xq;;i3KP!TM2P7dtGYS9R}u=sfe&mS;8pm ed5lRb<pEopliI%nz14o8*!6Vvb6Mw<&;$U62(k14 literal 0 HcmV?d00001 diff --git a/test/data/diffs/different-50-alpha.png b/test/data/diffs/different-50-alpha.png new file mode 100644 index 0000000000000000000000000000000000000000..d7fdbe8023c95946229eae8d43a8e5d414d89651 GIT binary patch literal 597 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-#^NA%Cx&(BWL^T<k(nV8B@w<p zR>}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<ChHXu<e|Dw!Ppv@rj?F?<eDpACs_Sooy zEJtz-#HV0UpjYj<Z1my5X2<1oNIeo5lB+yj978f#-_AJ5d%%F>$bwTYck5fvxg@sk znR8<5r!^%<EM+GMe*9+nuexvj0`3(n^jCW+sm#(g_N>~rHRj>Om33R)x8*l}d2H+Q zh2v%H)@g4Hb{<l>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 b3da29b..fd68556 100644 --- a/test/test.js +++ b/test/test.js @@ -449,7 +449,37 @@ describe('createDiff', () => { expect(equal).to.equal(true); }); + 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', async () => { await looksSame.createDiff({ reference: srcPath('ref.png'),