fix #10 with the addition of a transparency option to control the alpha of unchanged pixels

Author: chrisdeely

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

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) => {

lib/png.js

@@ -26,22 +26,24 @@ 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]
         };
     }
 
     /**
      * 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;
     }
 
     /**

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/data/diffs/different-0-alpha.png

@@ -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({