fix #10 with the addition of a transparency option

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
+    matchingPixelAlpha: 255, //0-255, controls the alpha channel for unchanged pixels. setting to 0 will remove all matching pixels from the diff
+    strict: false, // strict comparison
     tolerance: 2.5,
     antialiasingTolerance: 0,
     ignoreAntialiasing: true, // ignore antialising by default

index.js

@@ -77,13 +77,15 @@ const buildDiffImage = async (img1, img2, options) => {
     const minHeight = Math.min(img1.height, img2.height);
 
     const highlightColor = options.highlightColor;
-    const resultBuffer = Buffer.alloc(width * height * 3);
+    const alphaLevel = isNaN(options.matchingPixelAlpha) ? 255 : options.matchingPixelAlpha;
+    const resultBuffer = Buffer.alloc(width * height * 4);
 
-    const setPixel = (buf, x, y, {R, G, B}) => {
-        const pixelInd = (y * width + x) * 3;
+    const setPixel = (buf, x, y, {R, G, B, A = 255}) => {
+        const pixelInd = (y * width + x) * 4;
         buf[pixelInd] = R;
         buf[pixelInd + 1] = G;
         buf[pixelInd + 2] = B;
+        buf[pixelInd + 3] = A;
     };
 
     await iterateRect(width, height, (x, y) => {
@@ -98,11 +100,11 @@ 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, A:alphaLevel});
         }
     });
 
-    return img.fromBuffer(resultBuffer, {raw: {width, height, channels: 3}});
+    return img.fromBuffer(resultBuffer, {raw: {width, height, channels: 4}});
 };
 
 const parseColorString = (str) => {
@@ -134,7 +136,8 @@ const prepareOpts = (opts) => {
     return _.defaults(opts, {
         ignoreCaret: true,
         ignoreAntialiasing: true,
-        antialiasingTolerance: 0
+        antialiasingTolerance: 0,
+        matchingPixelAlpha: 255
     });
 };
 
@@ -216,7 +219,8 @@ exports.createDiff = async function saveDiff(opts) {
     const {first, second} = await utils.readPair(image1, image2);
     const diffImage = await buildDiffImage(first, second, {
         highlightColor: parseColorString(opts.highlightColor),
-        comparator: createComparator(first, second, opts)
+        comparator: createComparator(first, second, opts),
+        matchingPixelAlpha: opts.matchingPixelAlpha
     });
 
     return opts.diff === undefined

lib/image/image.js

@@ -23,7 +23,8 @@ module.exports = class Image extends ImageBase {
         return {
             R: this._buffer[idx],
             G: this._buffer[idx + 1],
-            B: this._buffer[idx + 2]
+            B: this._buffer[idx + 2],
+            A: this._channels === 4 ? this._buffer[idx + 3] : 255
         };
     }
 

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;
 };

test/test.js

@@ -449,6 +449,44 @@ describe('createDiff', () => {
 
         expect(equal).to.equal(true);
     });
+    it('should make all matching pixels fully transparent is matchingPixelAlpha set to 0', async () => {
+       await looksSame.createDiff({
+            reference: srcPath('ref.png'),
+            current: srcPath('different.png'),
+            diff: this.tempName,
+            highlightColor: '#ff00ff',
+            matchingPixelAlpha: 0
+        });
+
+       const {equal} = await looksSame(imagePath('diffs/different-0-alpha.png'), this.tempName, {strict: true});
+       expect(equal).to.equal(true);
+    });
+
+    it('should support partial matchingPixelAlpha in the diff', async () => {
+        await looksSame.createDiff({
+            reference: srcPath('ref.png'),
+            current: srcPath('different.png'),
+            diff: this.tempName,
+            highlightColor: '#ff00ff',
+            matchingPixelAlpha: 50
+        });
+
+        const {equal} = await looksSame(imagePath('diffs/different-50-alpha.png'), this.tempName, {strict: true});
+        expect(equal).to.equal(true);
+    });
+
+    it('should default to no transparency in the diff if the option is omitted', async () => {
+        await looksSame.createDiff({
+            reference: srcPath('ref.png'),
+            current: srcPath('different.png'),
+            diff: this.tempName,
+            highlightColor: '#ff00ff',
+            matchingPixelAlpha: undefined
+        });
+
+        const {equal} = await looksSame(imagePath('diffs/small-magenta.png'), this.tempName, {strict: true});
+        expect(equal).to.equal(true);
+    });
 
     it('should allow to build diff for taller images', async () => {
         await looksSame.createDiff({