Bildeforskjellskontroll

Sendte en CSS-tweak og vil vite nøyaktig hva som flyttet? Sammenligner du to skjermbilder for en visuell regresjonssjekk av QA? Lurer du på hva som faktisk endret seg mellom to eksporterte versjoner av det samme bildet? Å rulle frem og tilbake mellom to bilder og myse etter forskjeller er sakte og upålitelig - dette verktøyet overlegger de to og viser deg hver endrede piksel i ett bilde.

Sammenligningen er ekte piksel-differende matematikk, den samme familien av algoritmer som brukes av verktøy som pixelmatch: hver piksel av begge bildene konverteres fra RGB til YIQ-fargerom (Y = luma, I og Q = NTSC-krominansaksene), og den euklidiske avstanden mellom de to YIQ-punktene beregnes. Denne avstanden sammenlignes med en terskel satt av følsomhetsglidebryteren – øk følsomheten for å fange opp subtile fargeskift, senk den for å ignorere kompresjonsstøy og bry deg bare om åpenbare endringer.

En naiv sammenligning per piksel vil lyse opp alle kantutjevnende kanter som "annerledes" selv når ingenting meningsfullt endret seg, fordi utjevning forskyver en håndfull kantpiksler med noen få nyanser. Dette verktøyet kjører en ekte anti-aliasing-heuristikk på begge bildene: en piksel blir bare behandlet som en ekte forskjell hvis den IKKE sitter inne i en utjevningsgradient – ​​konkret, hvis dets eget 3x3-område i begge kildebildene ikke allerede inneholder både en lysere og en mørkere piksel enn seg selv, som er fingeravtrykket til en AA-utjevnet kant i stedet for faktisk innhold.

Last opp bilde A og bilde B, juster følsomheten om nødvendig og trykk på Utfør. Du får en nøyaktig prosentandel av piksler som avviker pluss et diff-bilde med hver reell endring uthevet i lys magenta over en nedtonet versjon av originalen – last den ned og legg den rett ved feilrapporten eller QA-notater. Begge bildene må ha samme dimensjoner; hvis de ikke gjør det, forteller verktøyet det tydelig i stedet for å beskjære eller strekke en av dem stille. Ingenting forlater nettleseren din på noe tidspunkt.