Kontroler różnic obrazu

Wysłałeś poprawkę CSS i chcesz dokładnie wiedzieć, co się przeniosło? Porównujesz dwa zrzuty ekranu w celu kontroli regresji wizualnej QA? Zastanawiasz się, co właściwie zmieniło się pomiędzy dwiema wyeksportowanymi wersjami tego samego zdjęcia? Przewijanie w tę i z powrotem pomiędzy dwoma obrazami i mrużenie oczu w poszukiwaniu różnic jest powolne i zawodne — to narzędzie nakłada oba obrazy i pokazuje każdy zmieniony piksel na jednym obrazie.

Porównanie to prawdziwa matematyka polegająca na różnicowaniu pikseli, ta sama rodzina algorytmów używana w narzędziach takich jak pixelmatch: każdy piksel obu obrazów jest konwertowany z RGB na przestrzeń kolorów YIQ (Y = luma, I i Q = osie chrominancji NTSC) i obliczana jest odległość euklidesowa między dwoma punktami YIQ. Odległość ta jest porównywana z progiem ustawionym za pomocą suwaka czułości — zwiększ czułość, aby uchwycić subtelne zmiany kolorów, obniż ją, aby zignorować szum kompresji i zwracać uwagę tylko na oczywiste zmiany.

Naiwne porównanie na piksel spowodowałoby, że każda wygładzona krawędź byłaby „inna”, nawet jeśli nic znaczącego się nie zmieniło, ponieważ wygładzanie przesuwa garść pikseli obramowania o kilka odcieni. To narzędzie wykorzystuje prawdziwą heurystykę antyaliasingu na obu obrazach: piksel jest traktowany jako prawdziwa różnica tylko wtedy, gdy NIE znajduje się wewnątrz wygładzającego gradientu — konkretnie, jeśli jego własne otoczenie 3x3 w którymkolwiek obrazie źródłowym nie zawiera już zarówno jaśniejszego, jak i ciemniejszego piksela niż on sam, co jest odciskiem palca wygładzonej przez AA krawędzi, a nie rzeczywistej zawartości.

Prześlij obraz A i obraz B, w razie potrzeby dostosuj czułość i naciśnij przycisk Wykonaj. Otrzymasz dokładny procent różniących się pikseli oraz obraz różnicowy, w którym każda rzeczywista zmiana jest zaznaczona jasną magentą na przyciemnionej wersji oryginału — pobierz go i dołącz bezpośrednio do raportu o błędzie lub notatek dotyczących kontroli jakości. Obydwa obrazy muszą mieć te same wymiary; jeśli tak się nie stanie, narzędzie poinformuje Cię o tym wyraźnie, zamiast po cichu przycinać lub rozciągać jeden z nich. Nic nie opuszcza Twojej przeglądarki w żadnym momencie.