Merge pull request #19 from gemini-testing/sipayrt.anti

Add ability to ignore image antialiasing

Author: sipayRT

README.md

@@ -54,7 +54,7 @@ looksSame('image1.png', 'image2.png', {ignoreCaret: true}, function(error, equal
 Both `strict` and `ignoreCaret` can be set independently of one another.
 
 Some devices can have different proportion between physical and logical screen resolutions also
-known as `pixel ratio`. Default value for this proportion is 1. 
+known as `pixel ratio`. Default value for this proportion is 1.
 This param also affects the comparison result, so it can be set manually with `pixelRatio` option.
 
 ```javascript
@@ -63,6 +63,14 @@ looksSame('image1.png', 'image2.png', {pixelRatio: 2}, function(error, equal) {
 });
 ```
 
+Some images has difference while comparing because of antialiasing. These diffs will be ignored by default. You can use `ignoreAntialiasing` option with `false` value to disable ignoring such diffs. In that way antialiased pixels will be marked as diffs. Read more about [anti-aliasing algorithm](http://www.eejournal.ktu.lt/index.php/elt/article/view/10058/5000).
+
+```javascript
+looksSame('image1.png', 'image2.png', {ignoreAntialiasing: true}, function(error, equal) {
+    ...
+});
+```
+
 ## Building diff image
 
 ```javascript

index.js

@@ -2,7 +2,8 @@
 var parseColor = require('parse-color'),
     colorDiff = require('color-diff'),
     png = require('./lib/png'),
-    IgnoreCaretComparator = require('./lib/ignore-caret-comparator');
+    IgnoreCaretComparator = require('./lib/ignore-caret-comparator'),
+    AntialiasingComparator = require('./lib/antialiasing-comparator');
 
 var JND = 2.3; //Just noticable difference
                 //if ciede2000 >= JND then colors
@@ -44,7 +45,11 @@ function everyPixelPair(png1, png2, predicate, endCallback) {
                 for (var x = 0; x < width; x++) {
                     var color1 = png1.getPixel(x, y),
                         color2 = png2.getPixel(x, y),
-                        result = predicate(color1, color2, x, y);
+                        result = predicate({
+                            color1, color2,
+                            x, y,
+                            width, height
+                        });
 
                     if (!result) {
                         return endCallback(false);
@@ -70,35 +75,46 @@ function arePNGsLookSame(png1, png2, opts, callback) {
     }
 
     var comparator = opts.strict? areColorsSame : makeCIEDE2000Comparator(opts.tolerance);
+    if (opts.ignoreAntialiasing) {
+        comparator = makeAntialiasingComparator(comparator, png1, png2);
+    }
+
     if (opts.ignoreCaret) {
         comparator = makeNoCaretColorComparator(comparator, opts.pixelRatio);
     }
 
     everyPixelPair(png1, png2, comparator, callback);
 }
 
+function makeAntialiasingComparator(comparator, png1, png2) {
+    const antialiasingComparator = new AntialiasingComparator(comparator, png1, png2);
+    return (data) => antialiasingComparator.compare(data);
+}
+
 function makeNoCaretColorComparator(comparator, pixelRatio) {
     const caretComparator = new IgnoreCaretComparator(comparator, pixelRatio);
-    return (color1, color2, x, y) => caretComparator.compare(color1, color2, x, y);
+    return (data) => caretComparator.compare(data);
 }
 
 function makeCIEDE2000Comparator(tolerance) {
-    return function doColorsLookSame(c1, c2) {
-        if (areColorsSame(c1, c2)) {
+    return function doColorsLookSame(data) {
+        if (areColorsSame(data)) {
             return true;
         }
         /*jshint camelcase:false*/
-        var lab1 = colorDiff.rgb_to_lab(c1),
-            lab2 = colorDiff.rgb_to_lab(c2);
+        var lab1 = colorDiff.rgb_to_lab(data.color1),
+            lab2 = colorDiff.rgb_to_lab(data.color2);
 
         return colorDiff.diff(lab1, lab2) < tolerance;
     };
 }
 
-function areColorsSame(c1, c2) {
-    return c1.R === c2.R &&
-        c1.G === c2.G &&
-        c1.B === c2.B;
+function areColorsSame(data) {
+    const c1 = data.color1;
+    const c2 = data.color2;
+    return c1.R === c2.R
+        && c1.G === c2.G
+        && c1.B === c2.B;
 }
 
 module.exports = exports = function looksSame(reference, image, opts, callback) {
@@ -109,6 +125,10 @@ module.exports = exports = function looksSame(reference, image, opts, callback)
 
     opts.tolerance = getToleranceFromOpts(opts);
 
+    if (opts.ignoreAntialiasing === undefined) {
+        opts.ignoreAntialiasing = true;
+    }
+
     readPair(reference, image, function(error, result) {
         if (error) {
             return callback(error, null);
@@ -136,7 +156,7 @@ function buildDiffImage(png1, png2, options, callback) {
         var color1 = png1.getPixel(x, y),
             color2 = png2.getPixel(x, y);
 
-        if (!options.comparator(color1, color2)) {
+        if (!options.comparator({color1, color2})) {
             result.setPixel(x, y, highlightColor);
         } else {
             result.setPixel(x, y, color1);
@@ -211,5 +231,5 @@ exports.colors = function(color1, color2, opts) {
         opts.tolerance = JND;
     }
     var comparator = makeCIEDE2000Comparator(opts.tolerance);
-    return comparator(color1, color2);
+    return comparator({color1, color2});
 };

lib/antialiasing-comparator.js

@@ -0,0 +1,93 @@
+'use strict';
+
+/*
+ * Anti-aliased pixel detector
+ * @see http://www.eejournal.ktu.lt/index.php/elt/article/view/10058/5000
+ */
+
+module.exports = class AntialiasingComparator {
+    constructor(baseComparator, png1, png2) {
+        this._baseComparator = baseComparator;
+        this._img1 = png1;
+        this._img2 = png2;
+    }
+
+    compare(data) {
+        return this._baseComparator(data) || this._checkIsAntialiased(data);
+    }
+
+    _checkIsAntialiased(data) {
+        return this._isAntialiased(this._img2, data.x, data.y, data, this._img1)
+            || this._isAntialiased(this._img1, data.x, data.y, data, this._img2);
+    }
+
+    _isAntialiased(img1, x1, y1, data, img2) {
+        const color1 = img1.getPixel(x1, y1);
+        const width = data.width;
+        const height = data.height;
+        const x0 = Math.max(x1 - 1, 0);
+        const y0 = Math.max(y1 - 1, 0);
+        const x2 = Math.min(x1 + 1, width - 1);
+        const y2 = Math.min(y1 + 1, height - 1);
+        let zeroes = 0;
+        let positives = 0;
+        let negatives = 0;
+        let min = 0;
+        let max = 0;
+        let minX, minY, maxX, maxY;
+
+        for (let y = y0; y <= y2; y++) {
+            for (let x = x0; x <= x2; x++) {
+                if (x === x1 && y === y1) continue;
+
+                // brightness delta between the center pixel and adjacent one
+                const delta = this._brightnessDelta(img1.getPixel(x, y), color1);
+
+                // count the number of equal, darker and brighter adjacent pixels
+                if (delta === 0) zeroes++;
+                else if (delta < 0) negatives++;
+                else if (delta > 0) positives++;
+
+                // if found more than 2 equal siblings, it's definitely not anti-aliasing
+                if (zeroes > 2) {
+                    return false;
+                }
+
+                if (!img2) continue;
+
+                // remember the darkest pixel
+                if (delta < min) {
+                    min = delta;
+                    minX = x;
+                    minY = y;
+                }
+                // remember the brightest pixel
+                if (delta > max) {
+                    max = delta;
+                    maxX = x;
+                    maxY = y;
+                }
+            }
+        }
+
+        if (!img2) return true;
+
+        // if there are no both darker and brighter pixels among siblings, it's not anti-aliasing
+        if (negatives === 0 || positives === 0) {
+            return false;
+        }
+
+        // if either the darkest or the brightest pixel has more than 2 equal siblings in both images
+        // (definitely not anti-aliased), this pixel is anti-aliased
+        return (!this._isAntialiased(img1, minX, minY, data) && !this._isAntialiased(img2, minX, minY, data)) ||
+               (!this._isAntialiased(img1, maxX, maxY, data) && !this._isAntialiased(img2, maxX, maxY, data));
+    }
+
+    _brightnessDelta(color1, color2) {
+        // gamma-corrected luminance of a color (YIQ NTSC transmission color space)
+        // see https://www.academia.edu/8200524/DIGITAL_IMAGE_PROCESSING_Digital_Image_Processing_PIKS_Inside_Third_Edition
+        const rgb2y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
+
+        return rgb2y(color1.R, color1.G, color1.B) - rgb2y(color2.R, color2.G, color2.B);
+    }
+};

lib/ignore-caret-comparator/index.js

@@ -33,16 +33,17 @@ module.exports = class IgnoreCaretComparator {
 
     /**
      * Compare pixels for current active comparator state
-     * @param {Object} color1
-     * @param {Object} color2
-     * @param {Number} x coordinate
-     * @param {Number} y coordinate
+     * @param {Object} data
+     * @param {Object} data.color1
+     * @param {Object} data.color2
+     * @param {Number} data.x coordinate
+     * @param {Number} data.y coordinate
      * @returns {boolean}
      */
-    compare(color1, color2, x, y) {
-        return this._baseComparator(color1, color2, x, y)
-            ? this._state.validateOnEqual({x, y})
-            : this._state.validateOnDiff({x, y});
+    compare(data) {
+        return this._baseComparator(data)
+            ? this._state.validateOnEqual({x: data.x, y: data.y})
+            : this._state.validateOnDiff({x: data.x, y: data.y});
     }
 
     switchState(stateName) {

test/data/src/antialiasing-actual.png

@@ -122,7 +122,7 @@ function expectDeclined(params, pixels) {
 }
 
 function execComparator(params, pixels) {
-    const colorComparator = (color) => !color;
+    const colorComparator = (data) => !data.color1;
     const ignoreCaretComparator = new IgnoreCaretComparator(colorComparator, params.pixelRatio);
     return comparePixels(pixels, ignoreCaretComparator.compare.bind(ignoreCaretComparator));
 }
@@ -131,7 +131,7 @@ function comparePixels(pixels, comparator) {
     let res = true;
     for(let y=0; y<pixels.length; ++y) {
         for(let x=0; x<pixels[y].length; ++x) {
-            res = comparator(pixels[y][x], null, x, y);
+            res = comparator({color1: pixels[y][x], x, y});
             if(!res) {
                 break;
             }

test/data/src/antialiasing-ref.png

@@ -136,6 +136,62 @@ describe('looksSame', function() {
                     done();
                 });
             });
+
+            it('if enabled, should return true for images with caret and antialiased pixels', function(done) {
+                const opts = {
+                    ignoreCaret: true,
+                    ignoreAntialiasing: true
+                };
+                looksSame(getImage('caret+antialiasing.png'), getImage('no-caret+antialiasing.png'), opts, function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(true);
+                    done();
+                });
+            });
+
+            it('if enabled, should return false for images with 1px diff', function(done) {
+                looksSame(getImage('no-caret.png'), getImage('1px-diff.png'), function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(false);
+                    done();
+                });
+            });
+        });
+    });
+
+    describe('with antialiasing', function() {
+        forFilesAndBuffers(function(getImage) {
+            it('should check images for antialiasing by default', function(done) {
+                looksSame(getImage('antialiasing-ref.png'), getImage('antialiasing-actual.png'), function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(true);
+                    done();
+                });
+            });
+
+            it('if disabled, should return false for images with antialiasing', function(done) {
+                looksSame(getImage('antialiasing-ref.png'), getImage('antialiasing-actual.png'), {ignoreAntialiasing: false}, function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(false);
+                    done();
+                });
+            });
+
+            it('if enabled, should return true for images with antialiasing', function(done) {
+                looksSame(getImage('antialiasing-ref.png'), getImage('antialiasing-actual.png'), {ignoreAntialiasing: true}, function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(true);
+                    done();
+                });
+            });
+
+            it('should return false for images which differ even with ignore antialiasing option', function(done) {
+                looksSame(getImage('no-caret.png'), getImage('1px-diff.png'), {ignoreAntialiasing: true}, function(error, equal) {
+                    expect(error).to.equal(null);
+                    expect(equal).to.equal(false);
+                    done();
+                });
+            });
         });
     });
 });