yahoo / blink-diff Goto Github PK

Would be great if blinkdiff supported writing the image to disk only when the result is different as the default behaviour is for all.

Something like:

function BlinkDiff (options) {
    this._imageOutputOnfailure = options.imageOutputOnfailure || false;
}

            // Need to write to the filesystem?
            if (this._imageOutputPath) {

                if (this._imageOutputOnfailure && this.hasPassed(result)) {
                    fn(undefined, result);
                } else {
                    this._imageOutput.writeImage(this._imageOutputPath, function (err) {
                        if (err) {
                            fn(err);
                        } else {
                            this.log("Wrote differences to " + this._imageOutputPath);
                            fn(undefined, result);
                        }
                    }.bind(this));
                }
            } else {
                fn(undefined, result);
            }

what's the difference with blink?

Pixel diffing is nice, but is there a way to tell this library that I care about "what is different" and not "highlighting the entire document just because there's extra vertical whitespace relatively high up in the image"?

For example, if I have two screenshots of a webpage, one with body { padding-top: 20px; } and one with body { padding-top: 20em; } then the only difference is going to be the extra whitespace. Everything else is identical, so having the entire image flagged as "diff" would be wrong (think of it as a github diff: a change that adds the letter a to the start of a README.md does not change the entire document. All it does is add an a, the rest of the document is still the same as before).

Is there a way to tell blink-diff to find diffs but with maximum shift detection?

I´m using blink-diff integrated with a test automation that compares images.
It would be nice if i can choose to generete the image output only if there is a diffence.

YahooArchive/pngjs-image#3

When I use BlinkDiff (in combination with PixDiff) and I compare a "small" baseline image with the actual taken image I get a failure. This is also what I expect. But when I look at the diff it doens't fail on the actual thing I'd expect, all the text should fail.

I've tested this with all the possible combinations and parameters I can adjust with BlinkDiff

• hShift / vShift / hideShift
• perceptual (didn't work because of issues with gamma, see the PR)
• delta

But the result is still not accurate enough.
Baseline:

Actual screenshot:

Comparison result:

I know it's a different library, but when I use the online version of Resemble I get this output (with the defaults on)

Any ideas?

This is no longer maintained it looks like. Is that correct?

In the example, have a outputPath param, but the correct is imageOutputPath.

Once I am running the below command

blink-diff --output image.png images/image1.png images/image2.png

it is flashing me an error on my console -
'blink-diff' is not recognized as an internal or external command, operable program or batch file.

Can anyone suggest what might the issue

... that are beyond the boundaries of imageA.

For example, with this code:

new BlinkDiff({
  hideShift: true,  // hide anti-aliasing differences (from composited image)
  imageA: imageA,
  imageB: imageB
})
.run((error, result) => console.log(result.differences);

... these two images result in a logged 0;

imageA:

imageB:

I want to achieve perceptual comparison through command-line. which option do I use for this?

Right now the diff image is outputted as top middle and bottom but it would be really useful if there was an option to also output it as left middle and right instead.

I am comparing two images and passing parameters like '--threshold-type' percent & '--threshold' somevalue to Pass/Fail comparison on base of threshold .
However it seems threshold value is not getting honored

D:\>node d:\node_modules\blink-diff\bin\blink-diff --verbose --threshold-
type percent --threshold 0.001% --output compare1.png previous_release1.png next_release1.png
Blink-Diff 1.0.13
Copyright (C) 2014 Yahoo! Inc.
Images are similar
386 pixels are different
Wrote differences to compare1.png
Time: 833.052ms
Differences: 386 (0.05%)
PASS

However when I pass threshold as 0% (--threshold 0%) , it works as expected and FAILs comparison when difference is > 0%.

D:\>node d:\node_modules\blink-diff\bin\blink-diff --verbose --threshold-
type percent --threshold 0% --output compare1.png previous_release1.png next_release1.png
Blink-Diff 1.0.13
Copyright (C) 2014 Yahoo! Inc.
Images are visibly different
386 pixels are different
Wrote differences to compare1.png
Time: 846.282ms
Differences: 386 (0.05%)
FAIL

I get this error when trying to use the library, here is the code I run:

const BlinkDiff = require('blink-diff');
const path = require('path');
const {promisify} = require('util');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');

chai.should();
chai.use(chaiAsPromised);

const config = require('../../src/config');

function comparer(refImage, testImage, diffPath) {
    const diff = new BlinkDiff({
        imageAPath: refImage, // Use file-path
        imageBPath: testImage,

        thresholdType: BlinkDiff.THRESHOLD_PERCENT,
        threshold: config.tolerance,

        imageOutputPath: diffPath
    });

    return promisify(diff.run)();
}

describe('BlinkDiff comparing module', () => {
    it('should detect visual difference', () => {
        const result = comparer(
            path.join(__dirname, '../image/ref.png'),
            path.join(__dirname, '../image/test.png'),
            path.join(__dirname, '../image/diff.png'),
        );
        result.should.eventually.have.property('mismatchPercentage');
        result.should.eventually.deep.equal({misMatchPercentage: 1});
        result.then(({mismatchPercentage}) => {
            mismatchPercentage.should.be.lessThan(config.tolerance);
        })
    });
});

The error output

"C:\Program Files\nodejs\node.exe" D:\code\new-test\node_modules\mocha\bin\_mocha --ui bdd --reporter "C:\Program Files\JetBrains\WebStorm 2017.2.4\plugins\NodeJS\js\mocha-intellij\lib\mochaIntellijReporter.js" D:\code\new-test\test\lib\blinkdiff-comparer.test.js --grep "BlinkDiff comparing module "
TypeError: this._loadImage is not a function
    at D:\code\new-test\node_modules\blink-diff\index.js:359:16
    at D:\code\new-test\node_modules\promise\lib\es6-extensions.js:18:19
    at flush (D:\code\new-test\node_modules\asap\asap.js:27:13)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
(node:8644) UnhandledPromiseRejectionWarning: TypeError: this._loadImage is not a function
    at D:\code\new-test\node_modules\blink-diff\index.js:359:16
    at D:\code\new-test\node_modules\promise\lib\es6-extensions.js:18:19
    at flush (D:\code\new-test\node_modules\asap\asap.js:27:13)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
(node:8644) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:8644) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:8644) UnhandledPromiseRejectionWarning: TypeError: this._loadImage is not a function
    at D:\code\new-test\node_modules\blink-diff\index.js:359:16
    at D:\code\new-test\node_modules\promise\lib\es6-extensions.js:18:19
    at flush (D:\code\new-test\node_modules\asap\asap.js:27:13)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
(node:8644) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:8644) UnhandledPromiseRejectionWarning: TypeError: this._loadImage is not a function
    at D:\code\new-test\node_modules\blink-diff\index.js:359:16
    at D:\code\new-test\node_modules\promise\lib\es6-extensions.js:18:19
    at flush (D:\code\new-test\node_modules\asap\asap.js:27:13)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
(node:8644) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

Process finished with exit code 0

"compareLeftToRight" in README.md should be "composeLeftToRight".
As well as "compareTopToBottom".

Would be great if blinkdiff would support loading an image from a buffer such as webdriver screenshots without requiring libs.

Example:

    /**
     * Loads the image from filesystem or loads the image from buffer
     *
     * @method _loadImage
     * @param {string} path
     * @param {PNGImage} image
     * @return {PNGImage|Promise}
     * @private
     */
    _loadImage: function (path, image) {
        if (image) {
            return Promise.denodeify(PNGImage.loadImage)(image);
        } else {
            return Promise.denodeify(PNGImage.readImage)(path);
        }
    },

Then we could do something like:

browser.takeScreenshot().then(function (image) {
    return new BlinkDiff({
            imageAPath: './image.png',
            imageB: new Buffer(image, 'base64')
        }).runWithPromise();
    }).then(function(result) {
        console.log(result);
    });
});

I've filed a request with pngjs-image to upgrade the pngjs version:

YahooArchive/pngjs-image#16

Currently this prevents installing blink-diff with Facebook's yarn package manager which enforces the engine clause in package.json

I love blink-diff by the way - excellent work, and thanks for sharing it! ❤️

Would be great if blinkdiff supported image cropping so that for example a small image could be compared with a cropped region of a larger image like a screenshot.

Something like:

function BlinkDiff (options) {

    this._imageCropRegion = options.imageCropRegion || {};

}

    run: function (fn) { 
        ...
            }.bind(this)).then(function (imageB) {
                this._imageB = imageB;

                if (Object.keys(this._imageCropRegion).length > 0) {
                    this._crop(this._imageB, this._imageCropRegion);
                }

                this._clip(this._imageA, this._imageB);
      ...
    },

    /**
     * Crops the source image to the bounds of rect
     *
     * @private
     * @method _crop
     * @param {PNGImage} image Source image
     * @param {object} rect Values for rect
     * @param (int} rect.left Left value of rect
     * @param (int} rect.top Top value of rect
     * @param (int} rect.width Width value of rect
     * @param (int} rect.height Height value of rect
     */
    _crop: function (image, rect) {

        if ((rect.left + rect.width) <= image.getWidth() && (rect.top + rect.height) <= image.getHeight()) {

            this.log("Cropping from " + rect.left + "," + rect.top + " by " + rect.width + " x " + rect.height);

            image.clip(rect.left, rect.top, rect.width, rect.height);
        }
    },

Example needs to be updated.

instead of

diff.run(function (passed) {
    console.log(passed ? 'Passed' : 'Failed');
});

It should be

diff.run(function (error) {
    console.log(error ? 'Failed' : 'Passed');
});

As per the below mentioned code:
#L317 fn(undefined, result);
#L321 fn(undefined, result);

I have been using blink-diff for image comparison of selenium captured screens . For some comparisons I have noticed that blink-diff gives result as 'FAIL' however when looking at percentage difference , it shows '0%' . Doesn't that seem strange .
Comparisons having '0%' differences should be marked as 'PASS' , however blink-diff returns 'FAIL' ...

Below is the command line I use for doing screen comparison .

D:\>node d:\node_modules\blink-diff\bin\blink-diff --verbose --threshold-
type percent --threshold 0% --output compare1.png previous_release1.png next_release1.png
Blink-Diff 1.0.13
Copyright (C) 2014 Yahoo! Inc.
Images are visibly different
29 pixels are different
Wrote differences to compare1.png
Time: 498.177ms
Differences: 29 (0%)
FAIL

    at Object.<anonymous> (/project/node_modules/blink-diff/index.js:355:10)
    at .<anonymous> (/project/node_modules/pngjs-image/index.js:28:12)
...

Image A:

Image B:

Could this be related to #32 ?

https://github.com/yahoo/blink-diff/blob/master/README.md#object-usage has an example that reads

outputPath: 'path/to/output/image'

It should read

imageOutputPath: 'path/to/output/image'

Hello there,

I am currently developing a tool that will automatically extract images from an HTML document as Buffers, compare them, and create a 'diff-document' containing the output images from a blink-diff comparison of images with equal index.

For performance reasons, it is not optimal for me to have blink-diff write .png-files, only for me to read them as Buffers again.

However, I am for a while now failing to find a way to return the Output-Image as a Buffer, or in any way get an output convertible to such.
Can you help me with that? That would be very much appreciated!

Kindest regards in advance,
Timm Kühnel

with the o2r-project
Institute for Geoinformation
WWU Muenster, Germany

API Documentation states following parameters as mandatory.

imageA
imageAPath
imageB
imageBPath

However, code says either imageA or imageAPath and imageB or imageBPath is required,

Output:

thomas@workstation:goldshelf$ node compare.js 
{ _imageA: undefined,
  _imageAPath: '/Users/thomas/Desktop/goldshelf/learn/input.jpg',
  _imageB: undefined,
  _imageBPath: '/Users/thomas/Desktop/goldshelf/learn/desired.jpg',
  _imageOutput: null,
  _imageOutputPath: '/Users/thomas/Desktop/goldshelf/output-diff/',
  _imageOutputLimit: 100,
  _thresholdType: 'percent',
  _threshold: 0.01,
  _delta: 20,
  _outputMaskRed: 255,
  _outputMaskGreen: 0,
  _outputMaskBlue: 0,
  _outputMaskAlpha: 255,
  _outputMaskOpacity: 0.7,
  _outputBackgroundRed: 0,
  _outputBackgroundGreen: 0,
  _outputBackgroundBlue: 0,
  _outputBackgroundAlpha: undefined,
  _outputBackgroundOpacity: 0.6,
  _outputShiftRed: 200,
  _outputShiftGreen: 100,
  _outputShiftBlue: 0,
  _outputShiftAlpha: 255,
  _outputShiftOpacity: 0.7,
  _blockOut: [],
  _blockOutRed: 0,
  _blockOutGreen: 0,
  _blockOutBlue: 0,
  _blockOutAlpha: 255,
  _blockOutOpacity: 1,
  _copyImageAToOutput: true,
  _copyImageBToOutput: false,
  _filter: [],
  _debug: false,
  _composition: true,
  _composeLeftToRight: false,
  _composeTopToBottom: false,
  _hShift: 2,
  _vShift: 2,
  _cropImageA: undefined,
  _cropImageB: undefined,
  _refWhite: { c1: 1, c2: 1, c3: 1, c4: 1 },
  _perceptual: false,
  _gamma: undefined,
  _gammaR: undefined,
  _gammaG: undefined,
  _gammaB: undefined }
Invalid file signature
Error: Invalid file signature
    at Parser._parseSignature (/Users/thomas/Desktop/goldshelf/node_modules/blink-diff/node_modules/pngjs-image/node_modules/pngjs/lib/parser.js:87:32)
    at ChunkStream._process (/Users/thomas/Desktop/goldshelf/node_modules/blink-diff/node_modules/pngjs-image/node_modules/pngjs/lib/chunkstream.js:186:23)
    at ChunkStream.write (/Users/thomas/Desktop/goldshelf/node_modules/blink-diff/node_modules/pngjs-image/node_modules/pngjs/lib/chunkstream.js:74:10)
    at PNG.write (/Users/thomas/Desktop/goldshelf/node_modules/blink-diff/node_modules/pngjs-image/node_modules/pngjs/lib/png.js:100:18)
    at ReadStream.ondata (_stream_readable.js:524:20)
    at emitOne (events.js:77:13)
    at ReadStream.emit (events.js:166:7)
    at readableAddChunk (_stream_readable.js:146:16)
    at ReadStream.Readable.push (_stream_readable.js:109:10)
    at onread (fs.js:1726:12)

Code:

var path = require("path")
var BlinkDiff = require("blink-diff")

var input = path.join(__dirname, "./learn/input.jpg")
var desired = path.join(__dirname, "./learn/desired.jpg")
var output = path.join(__dirname, "./output-diff/")

var diff = new BlinkDiff({
    imageAPath: input,
    imageBPath: desired,
    thresholdType: BlinkDiff.THRESHOLD_PERCENT,
    threshold: 0.01,
    imageOutputPath: output
});

console.log(diff)

diff.run(function (error, result) {
   if (error) {
      throw error;
   } else {
      console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');
      console.log('Found ' + result.differences + ' differences.');
   }
});

Running with: ./blink-diff --no-composition --output out.png ../examples/YDN_Multi.png ../examples/YDN_Swap.png

Still produces an image made of all three images (YDN_Multi, YDN_Swap, and the diff).

Was hoping to get only the diff in out.png

Could you also implement small performance test, how the tool is performing with different variety of image resolutions ? (example 100px x 100px; 300px x 300px; 1024px x 768px)

Hello,

I want to compare my images with a delta of zero. But if I put a zero value to delta it will be overridden here:
this._delta = options.delta || 20;

I saw that there is the same thing for threshold.
If I override the delta to zero manually in the source code, I have the diff image that I need.

I can make a PR to check if options.delta and options.thresholdare undefined.
But is there a legitimate reason that delta and threshold can't be equal to zero?

Thanks,

During testing of blink-diff I have experienced different results from the command-line usage vs. the Javascript Object usage.

Images used for this test:

people.png

people2.png

Command-line Usage

Command-line script:
./node_modules/blink-diff/bin/blink-diff --output blinkdiff-people.png people.png people2.png

Command-line result:

bash-3.2$ ./blinkcli.sh
Blink-Diff 1.0.7
Copyright (C) 2014 Yahoo! Inc.
Images are visibly different
16297 pixels are different
Wrote differences to blinkdiff-people.png
Time: 197ms
Differences: 16297 (6.52%)
FAIL

Output file: blinkdiff-people.png - (Works as expected)

Javascript Object Usage

blink.js

#!/usr/bin/env node

BlinkDiff = require('blink-diff')

var diff = new BlinkDiff({
    imageAPath: 'people.png',
    imageBPath: 'people2.png',

    imageOutputPath: 'blink-diff-people.png',

    verbose: true
});


diff.run(function (error) {
    console.log(error ? 'Failed' + error : 'Passed');
});

Run the script:
bash-3.2$ node blink.js

Output results (NOT as expected)

bash-3.2$ node blink.js 
Passed

Summary

Why are the results different? The results from the command-line usage are as expected, while the JS Object usage says "Passed" when it should say "Fail" and produce the output image.

I think it is not possible to get the result comparison file as a blob or something else.
I would like to have this option, since I am making comparisons of several images, and I wanted to generate only one results png file, with all image comparisons.

Would be great if blinkdiff supported ignoring pixel regions for such instances that there is dynamic content like a date or time displayed.

Something like:

var blinkDiff = new BlinkDiff({
    imageAPath: './imageA.png',
    imageBPath: './imageB.png',
    pixelIgnoreRegion: [
        {x: 10, y: 10, width: 20, height: 10},
        {x: 43, y: 53, width: 20, height: 10}
    ]
});

    _pixelCompare: function (imageA, imageB, imageOutput, deltaThreshold, pixelIgnoreRegion, width, height, outputMaskColor, outputShiftColor, backgroundColor, hShift, vShift, perceptual, gamma) {
        var difference = 0,
            i,
            x, y,
            delta,
            color1, color2,
            ignore = {};

        // build a hash lookup table
        for (i = 0; i < pixelIgnoreRegion.length; i++) {
            for (x = pixelIgnoreRegion[i].x; x < pixelIgnoreRegion[i].width; x++) {
                ignore[x] = []; // y column list for x row
                for (y = pixelIgnoreRegion[i].y; y < pixelIgnoreRegion[i].height; y++) {
                    ignore[x].push(y);
                }
            }
        }

        for (x = 0; x < width; x++) {
            for (y = 0; y < height; y++) {

                // Find if x is in ignore hash keys
                if (ignore[x]) {
                    // Find if y is in ignore list
                    if (ignore[x].indexOf(y) != -1){
                        continue; // skip pixel
                    }
                }

                i = imageA.getIndex(x, y);

https://codeclimate.com/github/yahoo/blink-diff/index.js