Kontrola rozdílu obrazu

Poslali jste vylepšení CSS a chcete přesně vědět, co se přesunulo? Porovnáváte dva snímky obrazovky pro vizuální regresní kontrolu QA? Zajímá vás, co se vlastně změnilo mezi dvěma exportovanými verzemi stejné fotografie? Posouvání tam a zpět mezi dvěma obrázky a šilhání po rozdílech je pomalé a nespolehlivé – tento nástroj je překrývá a zobrazuje každý změněný pixel v jednom obrázku.

Porovnání je skutečná matematika pro rozlišení pixelů, stejná rodina algoritmů, kterou používají nástroje jako pixelmatch: každý pixel obou obrázků je převeden z RGB do barevného prostoru YIQ (Y = luma, I a Q = chrominanční osy NTSC) a je vypočítána euklidovská vzdálenost mezi dvěma body YIQ. Tato vzdálenost se porovnává s prahovou hodnotou nastavenou posuvníkem citlivosti – zvyšte citlivost, abyste zachytili jemné barevné posuny, snižte ji, abyste ignorovali šum komprese a starejte se pouze o zjevné změny.

Naivní srovnání na pixel by rozsvítilo každý vyhlazený okraj jako „jiný“, i když se nic smysluplného nezměnilo, protože vyhlazení posune hrstku pixelů okraje o několik odstínů. Tento nástroj spouští skutečnou heuristiku anti-aliasingu na obou obrázcích: pixel je považován za skutečný rozdíl pouze tehdy, pokud NESEDE uvnitř vyhlazovacího gradientu – konkrétně, pokud jeho vlastní sousedství 3x3 v žádném zdrojovém obrázku již neobsahuje světlejší i tmavší pixel než on sám, což je otisk AA vyhlazeného okraje spíše než skutečný obsah.

Nahrajte obrázek A a obrázek B, v případě potřeby upravte citlivost a stiskněte Execute. Získáte přesné procento pixelů, které se liší, plus obrázek rozdílu s každou skutečnou změnou zvýrazněnou jasně purpurovou barvou oproti ztlumené verzi originálu – stáhněte si ji a připojte ji přímo ke své zprávě o chybě nebo poznámkám kontroly kvality. Oba obrázky musí mít stejné rozměry; pokud tomu tak není, nástroj vám to jasně řekne, namísto tichého oříznutí nebo roztažení jednoho z nich. V žádném okamžiku nic neopustí váš prohlížeč.