Åadowanie...
Åadowanie...
Przeciągnij dwa obrazy i podświetl każdy zmieniony piksel. Dostosuj próg, aby zignorować drobne szumy kompresji, zobacz dokładny procent zmian i eksportuj różnice jako PNG.
Wybierz dwa obrazy, aby rozpocząć ich porównywanie piksel po pikselu.
Wizualizator różnic pikseli porównuje dwa obrazy na poziomie pikseli i podświetla każdą pozycję, w której różnią się wartości kolorów. To wizualny odpowiednik różnicy kodu: dokładnie widzisz, co się zmieniło między dwoma zrzutami ekranu, dwoma eksportami projektów lub dwoma zrzutami z testu regresyjnego. To narzędzie działa całkowicie w twojej przeglądarce, korzystając z API HTML Canvas. Skanuje każdy piksel w obrazie A w porównaniu do odpowiadającego mu piksela w obrazie B, sumuje absolutne różnice kanałów i maluje każdy piksel powyżej twojego progu w wybranym kolorze podświetlenia. Otrzymujesz również procent zmian, aby móc określić, jak bardzo różnią się dwa obrazy.
Upuść lub wybierz obraz A (bazowy) i obraz B (wersję, którą chcesz porównać). Zaleca się użycie tych samych wymiarów; niedopasowane rozmiary są automatycznie skalowane do obrazu A.
Podświetlanie zmian jest domyślnym trybem — każdy zmieniony piksel jest malowany w wybranym kolorze podświetlenia. Obok siebie renderuje A, B i różnicę w jednym pasku; Nakładka nakłada B z 50% przezroczystości na A.
Przeciągnij suwak progu w górę, aby zignorować drobne szumy kompresji i małe artefakty JPEG. 5% to dobry punkt wyjścia dla skompresowanych zdjęć; 0% uchwyci każdą różnicę pikseli.
Procent zmian informuje, jaka część pikseli przekracza próg — przydatne do przeglądów regresyjnych lub QA projektów.
Kliknij Pobierz, aby zapisać renderowaną różnicę w pełnej rozdzielczości. Przydatne do załączników przeglądów kodu i raportów błędów.
Dla każdej pozycji p, z kanałami (r, g, b) z obrazów A i B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Piksel jest traktowany jako różny, gdy: diff(p) > (threshold% × 765) / 100 gdzie 765 = 3 × 255 to maksymalna różnica sumy kanałów. To jest to samo metryka odległości L1 używana przez narzędzia do różnic obrazów, takie jak pixelmatch i resemble.js, wyrażona jako pojedynczy regulowany próg, a nie tolerancje dla każdego kanału.
Odległość L1 (Manhattan) w kanałach RGB jest najprostszą metryką, która uchwyca zarówno przesunięcia kolorów, jak i przesunięcia jasności. Alpha jest ignorowana, ponieważ większość przypadków użycia różnic (zrzuty ekranu, regresje zdjęć) działa na nieprzezroczystych obrazach. Dla obrazów o różnych wymiarach obraz B jest przeskalowywany do obrazu A przy użyciu wysokiej jakości filtrowania bilinearnym przed uruchomieniem porównania.
| Wejścia | Wynik różnicy |
|---|---|
Dwa identyczne PNG 1920×1080 | 0% zmiany — różnica jest całkowicie przyciemniona Żadne piksele nie przekraczają progu; idealne przejście testu regresji. |
Dwa JPEGi tej samej sceny w jakości 85% | ~1–2% przy progu = 0 Szum kompresji tworzy drobne różnice na poziomie pikseli; podnieś próg do 5%, aby zignorować. |
Eksport projektu A vs B (zmiana koloru przycisku) | Zmiana ograniczona do prostokąta przycisku Kolor podświetlenia sprawia, że zmodyfikowany obszar jest natychmiast widoczny. |
Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.
Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.
Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.
Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.
Ostatnia aktualizacja