pixelmatch
pixelmatch copied to clipboard
mapbox
Detect difference between white and transparent pixels
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.
It seems this is the same bug as #21. Can't tell from the discussions why that issue was closed...
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?
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?
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! :)
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.
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.
