Porównywarka obrazów
Wgraj dwa obrazy i zobacz dokładną co do piksela wizualną różnicę między nimi, z percepcyjnym porównaniem YIQ i podświetlaniem świadomym antyaliasingu — w 100% lokalnie w Twojej przeglądarce.
🔒 Przetwarzane w całości w Twojej przeglądarce — nic, co tu wpiszesz, nie zostanie nigdy przesłane.
Wynik
Wdrożyłeś poprawkę CSS i chcesz dokładnie wiedzieć, co się przesunęło? Porównujesz dwa zrzuty ekranu w ramach wizualnych testów regresyjnych QA? Zastanawiasz się, co faktycznie zmieniło się między dwiema wyeksportowanymi wersjami tego samego zdjęcia? Przełączanie się w tę i z powrotem między dwoma obrazami i wytężanie wzroku 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 porównywania pikseli, ten sam rodzaj algorytmu, jakiego używają narzędzia takie jak pixelmatch: każdy piksel obu obrazów jest konwertowany z RGB do przestrzeni kolorów YIQ (Y = luma, I i Q = osie chrominancji NTSC), a następnie obliczana jest odległość euklidesowa między tymi dwoma punktami YIQ. Odległość ta jest porównywana z progiem ustawionym za pomocą suwaka czułości — zwiększ czułość, aby wychwycić subtelne przesunięcia kolorów, zmniejsz ją, aby ignorować szumy kompresji i zwracać uwagę tylko na oczywiste zmiany.
Naiwne porównanie piksel po pikselu oznaczałoby każdą wygładzoną krawędź jako „inną”, nawet jeśli nic istotnego się nie zmieniło, ponieważ wygładzanie przesuwa garść pikseli brzegowych o kilka odcieni. To narzędzie wykorzystuje prawdziwą heurystykę antyaliasingu na obu obrazach: piksel jest traktowany jako rzeczywista różnica tylko wtedy, gdy NIE znajduje się wewnątrz gradientu wygładzającego — konkretnie, jeśli jego własne sąsiedztwo 3×3 w jednym z obrazów źródłowych nie zawiera już zarówno piksela jaśniejszego, jak i ciemniejszego od niego samego, co jest cechą charakterystyczną krawędzi wygładzonej antyaliasingiem, a nie rzeczywistej treści.
Wgraj Obraz A i Obraz B, w razie potrzeby dostosuj czułość i naciśnij Wykonaj. Otrzymasz dokładny procent pikseli, które się różnią, oraz obraz różnicy z każdą rzeczywistą zmianą podświetloną na jaskrawy kolor magenta na przyciemnionej wersji oryginału — pobierz go i dołącz bezpośrednio do zgłoszenia błędu lub notatek QA. Oba obrazy muszą mieć te same wymiary; jeśli ich nie mają, narzędzie informuje o tym wprost, zamiast cicho przycinać lub rozciągać któryś z nich. Nic w żadnym momencie nie opuszcza Twojej przeglądarki.