Add diffMask option (#73)

To draw diff over a transparent background.

Author: tmeasday

README.md

@@ -49,6 +49,7 @@ Implements ideas from the following papers:
 - `alpha` — Blending factor of unchanged pixels in the diff output. Ranges from `0` for pure white to `1` for original brightness. `0.1` by default.
 - `aaColor` — The color of anti-aliased pixels in the diff output in `[R, G, B]` format. `[255, 255, 0]` by default.
 - `diffColor` — The color of differing pixels in the diff output in `[R, G, B]` format. `[255, 0, 0]` by default.
+- `diffMask` — Draw the diff over a transparent background (a mask), rather than over the original image. Will not draw anti-aliased pixels (if detected).
 
 Compares two images, writes the output diff and returns the number of mismatched pixels.
 

index.js

@@ -7,7 +7,8 @@ const defaultOptions = {
     includeAA: false,       // whether to skip anti-aliasing detection
     alpha: 0.1,             // opacity of original image in diff ouput
     aaColor: [255, 255, 0], // color of anti-aliased pixels in diff output
-    diffColor: [255, 0, 0]  // color of different pixels in diff output
+    diffColor: [255, 0, 0],  // color of different pixels in diff output
+    diffMask: false         // draw the diff over a transparent background (a mask)
 };
 
 function pixelmatch(img1, img2, output, width, height, options) {
@@ -32,7 +33,7 @@ function pixelmatch(img1, img2, output, width, height, options) {
         if (a32[i] !== b32[i]) { identical = false; break; }
     }
     if (identical) { // fast path if identical
-        if (output) {
+        if (output && !options.diffMask) {
             for (let i = 0; i < len; i++) drawGrayPixel(img1, 4 * i, options.alpha, output);
         }
         return 0;
@@ -61,7 +62,8 @@ function pixelmatch(img1, img2, output, width, height, options) {
                 if (!options.includeAA && (antialiased(img1, x, y, width, height, img2) ||
                                            antialiased(img2, x, y, width, height, img1))) {
                     // one of the pixels is anti-aliasing; draw as yellow and do not count as difference
-                    if (output) drawPixel(output, pos, aaR, aaG, aaB);
+                    // note that we do not include such pixels in a mask
+                    if (output && !options.diffMask) drawPixel(output, pos, aaR, aaG, aaB);
 
                 } else {
                     // found substantial difference not caused by anti-aliasing; draw it as red
@@ -71,7 +73,7 @@ function pixelmatch(img1, img2, output, width, height, options) {
 
             } else if (output) {
                 // pixels are similar; draw background as grayscale image blended with white
-                drawGrayPixel(img1, pos, options.alpha, output);
+                if (!options.diffMask) drawGrayPixel(img1, pos, options.alpha, output);
             }
         }
     }

test/fixtures/1diffmask.png

@@ -9,6 +9,8 @@ const match = require('../.');
 const options = {threshold: 0.05};
 
 diffTest('1a', '1b', '1diff', options, 143);
+diffTest('1a', '1b', '1diffmask', {threshold: 0.05, includeAA: false, diffMask: true}, 143);
+diffTest('1a', '1a', '1emptydiffmask', {threshold: 0, diffMask: true}, 0);
 diffTest('2a', '2b', '2diff', {
     threshold: 0.05,
     alpha: 0.5,