Detect difference between white and transparent pixels

[tommypreger]

It seems like pixelmatch always returns 0 diff when comparing two images that only contain white pixels and transparency. I noticed this when trying to compare two white logo pngs. Pixelmatch doesn't care if i transform, rotate or draw more white on my logo, it still says 0 diff to the original. If I do the same experiment with a colored image it behaves as intended.

[tommypreger]

It seems this is the same bug as #21. Can't tell from the discussions why that issue was closed...

[mourner]

Pixelmatch measures visual difference, not numeric one, so it blends all transparent/semi-transparent pixels over a white background. If you have transparent pixels mixed with white pixels on a white background, you won't see the difference, so neither does pixelmatch. Would it help to introduce an option to set a different default background to blend images to?

[tommypreger]

Hi!
I'm not sure I understand how visual difference is measured, but it seems like being able to pick a non-solid background would help. Any non-white color would be better than white (since a lot of graphic/logo images are white), but all solid colors will obviously have a blind spot with that specific color. Is it possible to compare to a patterned background? Such as checker-box or something?

[tommypreger]

Is this something that could be implemented? And would it have any speed-implications?
Pixelmap fits my needs perfectly except for this "bug", which renders it unusable for me.
A fix would be greatly appreciated! :)

[mourner]

Yes, I think a checkerboard-style background would be possible and likely not impacting speed — let's look into that! Maybe we should change the white blending color to gray as a first simple step though since it's less likely to go unnoticeable.

[tommypreger]

Okay, so I can't say I understand the inner workings of Pixelmap, but after messing around a little bit with the source I have managed to make it do what I want, i think.

// blend semi-transparent color
function blend(c, a) {
    var b = (c + 128) % 256;
    return b + (c - b) * a;
}

This is just an intuitive hack from my side, and I'm not sure if it has any unwanted side-effects.
Edit: it fails all tests, but it keeps working for me... I'll continue using this hack for now.

[tommypreger]

Have you had time to try out my fix? :)

[sul4bh]

Any updates on this?