Billedforskelkontrol

Sendte en CSS-tweak og vil gerne vide præcis, hvad der flyttede sig? Sammenligner du to skærmbilleder til en visuel regressionskontrol af QA? Gad vide, hvad der egentlig ændrede sig mellem to eksporterede versioner af det samme billede? Det er langsomt og upålideligt at rulle frem og tilbage mellem to billeder og skele efter forskelle – dette værktøj overlejrer de to og viser dig hver ændret pixel i ét billede.

Sammenligningen er ægte pixel-afvigende matematik, den samme familie af algoritmer, der bruges af værktøjer som pixelmatch: hver pixel af begge billeder konverteres fra RGB til YIQ-farverum (Y = luma, I og Q = NTSC-krominansakserne), og den euklidiske afstand mellem de to YIQ-punkter beregnes. Denne afstand sammenlignes med en tærskel, der er indstillet af følsomhedsskyderen - hæv følsomheden for at fange subtile farveskift, sænk den for at ignorere kompressionsstøj og kun bekymre dig om åbenlyse ændringer.

En naiv sammenligning pr. pixel ville lyse alle kantudjævnede kanter op som "anderledes", selv når intet meningsfuldt ændrede sig, fordi udjævning flytter en håndfuld kantpixel med et par nuancer. Dette værktøj kører en ægte anti-aliasing-heuristik på begge billeder: en pixel behandles kun som en ægte forskel, hvis den IKKE sidder inde i en udjævningsgradient - konkret, hvis dens eget 3x3-kvarter i begge kildebilleder ikke allerede indeholder både en lysere og en mørkere pixel end sig selv, hvilket er fingeraftrykket af en AA-udjævnet kant snarere end faktisk indhold.

Upload billede A og billede B, juster følsomheden om nødvendigt, og tryk på Udfør. Du får en nøjagtig procentdel af pixels, der adskiller sig plus et diff-billede med hver reel ændring fremhævet i lys magenta over en nedtonet version af originalen - download den og vedhæft den direkte til din fejlrapport eller QA-noter. Begge billeder skal have samme dimensioner; hvis de ikke gør det, fortæller værktøjet det tydeligt i stedet for lydløst at beskære eller strække en af ​​dem. Intet forlader din browser på noget tidspunkt.