Beeldverschilcontrole

Heeft u een CSS-tweak verzonden en wilt u precies weten wat er is verplaatst? Twee schermafbeeldingen vergelijken voor een visuele QA-regressiecontrole? Vraagt ​​u zich af wat er feitelijk is veranderd tussen twee geëxporteerde versies van dezelfde foto? Heen en weer scrollen tussen twee afbeeldingen en zoeken naar verschillen is traag en onbetrouwbaar. Deze tool legt de twee over elkaar heen en toont je elke gewijzigde pixel in één afbeelding.

De vergelijking is echte pixel-diffing-wiskunde, dezelfde algoritmefamilie die wordt gebruikt door tools als pixelmatch: elke pixel van beide afbeeldingen wordt omgezet van RGB naar YIQ-kleurruimte (Y = luma, I en Q = de NTSC-chrominantie-assen), en de Euclidische afstand tussen de twee YIQ-punten wordt berekend. Die afstand wordt vergeleken met een drempel die is ingesteld door de gevoeligheidsschuifregelaar: verhoog de gevoeligheid om subtiele kleurverschuivingen op te vangen, verlaag deze om compressieruis te negeren en geef alleen om duidelijke veranderingen.

Een naïeve vergelijking per pixel zou elke anti-alias-rand als "anders" oplichten, zelfs als er niets betekenisvols is veranderd, omdat bij vloeiend maken een handvol randpixels een paar tinten wordt verschoven. Deze tool voert een echte anti-aliasing-heuristiek uit op beide afbeeldingen: een pixel wordt alleen als een echt verschil beschouwd als hij NIET binnen een vloeiend verloop zit - concreet, als zijn eigen 3x3-omgeving in een van de bronafbeeldingen niet al zowel een lichtere als een donkerdere pixel bevat dan zichzelf, wat de vingerafdruk is van een AA-afgevlakte rand in plaats van de werkelijke inhoud.

Upload afbeelding A en afbeelding B, pas indien nodig de gevoeligheid aan en druk op Uitvoeren. U krijgt een exact percentage pixels dat verschilt plus een diff-afbeelding waarbij elke echte verandering in helder magenta is gemarkeerd over een gedimde versie van het origineel. Download het en voeg het rechtstreeks toe aan uw bugrapport of QA-opmerkingen. Beide afbeeldingen moeten dezelfde afmetingen hebben; Als dat niet het geval is, vertelt de tool u dit duidelijk in plaats van stilletjes een van de twee bij te snijden of uit te rekken. Niets verlaat op enig moment uw browser.