Support for ignoring pixel region

[koola]

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

[marcelerz]

This won't work in all cases. For example, if a blur-filter (or any box-filter) is applied to remove high-frequencies, then values from neighboring pixels will be applied to the currently compared pixel and therefore share some of the information, even though they should actually be ignored. What I have done in the past, for example in the Hodman project, was to black-out some areas before applying the filters, or even save screenshots as is. This way, the pixel will share the same black pixel across comparisons. What I can do is to black-out the pixels and then compare black-to-black. This will make sure that there is no additional hash lookup for each pixel (so, no slow-down), and cases like shared pixel values will also be covered.

Here is an example:

Does this work for you?

[koola]

So If I understand correctly, you would black-out a region in ImageA then define that region as a property in blinkdiff to ignore?

If that's the case, then that's great.

[marcelerz]

No, actually, I would black-out the area in imageA and imageB, and when the pixels are compared, then they are the same because they are both black.

One thing to note here is that the black-out area would be visible in the result to avoid having "ghost differences". What I mean with that are the differences in position - when the area moves due to CSS changes. For example, since the contents are blacked-out, they will not be used to be compared and shifts of the DOM element would be missed. But, when they are blacked-out, these differences will be noted by Blink-Diff since the whole frame will be shifted. If we, however, remove the black-out in the result, then differences will be highlighted in areas where there are non. That means, black-outs have to stay in the result to show what has been compared.

I hope that makes sense.

[koola]

So I would manually black-out the area in imageA and imageB? Couldn't blinkdiff do the black-out in imageB itself via some property bounds set?

[marcelerz]

Yes, Blink-Diff could do that. The question is simply if this is acceptable for you.

[koola]

That's absolutely acceptable. Thank you.

[marcelerz]

Sorry for the wait. I finally implemented it. The command-line has now the parameter block-out which gives the coordinates comma-separated, and this one can be called multiple times in the row.
When you access the API directly, then you can even modify the color of the blocking-out - by default it is black. I made it so that the blocked-out area is not visible by default, but when you set the debug flag, you can see the blocked-out areas in the result. This might be cleaner. Let me know if you have any questions or changes to this feature.
The current version is: blink-diff@1.0.7

[koola]

Thank you for implementing this. It's awesome as is!