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'),