Generator filtrów CSS

Każdy generator filtrów CSS pozwala łączyć ze sobą rozmycie(), jasność(), kontrast() i resztę — ale prawie żaden z nich nie pozwala, aby kolejność miała znaczenie, ponieważ większość zawsze stosuje filtry tylko w jednej ustalonej sekwencji. Ten jest inny: łańcuch filtrów to prawdziwa lista, w której można zmieniać kolejność, zbudowana za pomocą natywnego przeciągania i upuszczania HTML5, a zmiana kolejności dwóch funkcji rzeczywiście zmienia renderowane piksele, dokładnie tak, jak miałoby to miejsce w produkcyjnym CSS. Funkcja rozmycia, a następnie odcienia i obracania wygląda inaczej niż funkcja obracania odcienia, a następnie rozmycia, a teraz możesz zobaczyć, dlaczego, zanim ją wyślesz.

Prześlij własne zdjęcie, a dziewięć funkcji, które można łączyć w łańcuchy — rozmycie, jasność, kontrast, nasycenie, obrót odcienia, sepia, skala szarości, odwracanie i rzucanie cienia — zastosuj do niego na żywo jako rzeczywistą deklarację CSS „filter” na elemencie „<img>”, a nie symulowaną próbkę. Dodaj funkcję z zaznaczenia, przeciągnij jej wiersz w górę lub w dół listy, aby zmienić jej pozycję w łańcuchu, dostosuj jej suwak oraz podgląd i kopiowalną aktualizację linii `filter: ...;` na każdym wejściu. Usuń stopień za pomocą własnego przycisku, bezpośrednio w rzędzie.

Drugi, mniejszy łańcuch tworzy wartość „filtru tła” zastosowaną do panelu nakładki umieszczonego nad podglądem, dzięki czemu można zobaczyć efekt matowego szkła — technikę stosowaną za nowoczesnymi półprzezroczystymi paskami nawigacyjnymi i modalnymi tłami — bez dotykania własnego łańcucha filtrów obrazu bazowego. Działa to nawet przed przesłaniem zdjęcia, na kolorowym tle zastępczym, dzięki czemu możesz w ciągu kilku sekund wybrać projekt matowego panelu.

Gdy podgląd wygląda prawidłowo, skopiuj CSS bezpośrednio z pola wyjściowego lub wyeksportuj prawdziwy plik PNG: ten sam ciąg filtra jest przekazywany do właściwości `ctx.filter` kontekstu Canvas 2D — która używa identycznej składni jak właściwość `filter` CSS — a płótno jest konwertowane do pliku do pobrania za pomocą `canvas.toBlob()`. Wyeksportowany obraz dokładnie odpowiada podglądowi na żywo, ponieważ jest tworzony przez ten sam ciąg filtrów przechodzący przez ten sam prymityw renderowania. Wszystko dzieje się lokalnie w Twojej przeglądarce; Twoje zdjęcie nigdy nie jest nigdzie przesyłane.