Generátor CSS filtrů

Každý generátor CSS filtrů vám umožňuje skládat rozostření (), jas (), kontrast () a ostatní – ale téměř u žádného z nich nezáleží na pořadí, protože většina z nich používá filtry pouze v jedné pevné sekvenci. Tento je jiný: řetězec filtrů je skutečný seznam s možností změny pořadí vytvořený pomocí nativního přetažení HTML5 a přeuspořádání dvou funkcí skutečně změní vykreslované pixely, přesně jako v produkčním CSS. Rozostřit-pak-odstín-rotovat vypadá jinak než odstín-otočit-pak-rozostřit a nyní můžete před odesláním zjistit proč.

Nahrajte svou vlastní fotografii a devět řetězitelných funkcí – rozostření, jas, kontrast, sytost, otočení odstínu, sépie, stupně šedi, převrácení a vržený stín – se na ni použije živě jako skutečná deklarace CSS „filtru“ na prvku „<img>“, nikoli simulovaný vzorek. Přidejte funkci z výběru, přetáhněte její řádek nahoru nebo dolů v seznamu, abyste změnili její pozici v řetězci, upravte její posuvník a náhled a kopírovatelný řádek `filtr: ...;` se aktualizují při každém vstupu. Odstraňte krok vlastním tlačítkem přímo v řadě.

Druhý, menší řetězec vytváří hodnotu „filtru pozadí“ aplikovanou na překryvný panel umístěný nad náhledem, takže můžete vidět efekt matného skla – techniku moderních průsvitných navigačních pruhů a modálních pozadí – aniž byste se dotkli vlastního řetězce filtrů na podkladovém obrázku. Funguje to ještě předtím, než nahrajete fotografii, na barevném pozadí zástupného symbolu, takže můžete vytočit matný panel během několika sekund.

Když náhled vypadá správně, zkopírujte CSS přímo z výstupního pole nebo exportujte skutečný PNG: stejný řetězec filtru se předá vlastnosti `ctx.filter` kontextu Canvas 2D — která používá stejnou syntaxi jako vlastnost `filter` CSS — a plátno se převede na soubor ke stažení pomocí `canvas.toBlob()`. Exportovaný obrázek se přesně shoduje s živým náhledem, protože je vytvořen stejným řetězcem filtru, který prochází stejným vykreslovacím primitivem. Vše se děje lokálně ve vašem prohlížeči; vaše fotografie se nikdy nikam nenahraje.