Generátor CSS filtrov

Každý generátor CSS filtrov vám umožňuje ukladať rozostrenie (), jas (), kontrast () a ostatné – ale takmer na žiadnom z nich nezáleží na poradí, pretože väčšina z nich používa filtre iba v jednej pevnej sekvencii. Tento je iný: reťazec filtrov je skutočný zoznam s možnosťou opätovného usporiadania vytvorený pomocou natívneho HTML5 drag-and-drop a opätovné usporiadanie dvoch funkcií skutočne zmení vykreslené pixely presne tak, ako by to bolo v produkčnom CSS. Rozostrenie-potom-odtieň-otočiť vyzerá inak ako odtieň-otočiť-potom rozmazať a teraz pred odoslaním vidíte prečo.

Nahrajte svoju vlastnú fotografiu a deväť funkcií, ktoré možno reťaziť – rozmazanie, jas, kontrast, nasýtenie, otočenie odtieňa, sépia, odtiene sivej, invertovanie a vrhnutie tieňa – sa na ňu naživo použije ako skutočná deklarácia CSS „filtra“ v prvku „<img>“, nie ako simulovaná vzorka. Pridajte funkciu z výberu, potiahnite jej riadok nahor alebo nadol v zozname, aby ste zmenili jej pozíciu v reťazci, upravte jej posúvač a náhľad a kopírovateľný riadok `filter: ...;` sa aktualizujú pri každom vstupe. Odstráňte krok vlastným tlačidlom priamo v rade.

Druhý, menší reťazec vytvára hodnotu „backdrop-filter“ aplikovanú na prekryvný panel umiestnený nad náhľadom, takže môžete vidieť efekt matného skla – techniku ​​za modernými priesvitnými navigačnými panelmi a modálnym pozadím – bez toho, aby ste sa dotkli vlastnej reťaze filtrov na spodnom obrázku. Funguje to ešte predtým, ako nahráte fotografiu, na pozadí farebného zástupného symbolu, takže môžete vytočiť matný panel v priebehu niekoľkých sekúnd.

Keď ukážka vyzerá správne, skopírujte CSS priamo z výstupného poľa alebo exportujte skutočný PNG: rovnaký reťazec filtra sa odovzdá vlastnosti „ctx.filter“ kontextu Canvas 2D – ktorá používa rovnakú syntax ako vlastnosť „filter“ CSS – a plátno sa skonvertuje na súbor na stiahnutie pomocou „canvas.toBlob()“. Exportovaný obrázok sa presne zhoduje so živým náhľadom, pretože ho vytvára rovnaký reťazec filtra, ktorý prechádza rovnakým vykresľovacím primitívom. Všetko sa deje lokálne vo vašom prehliadači; vaša fotografia sa nikdy nikam neodovzdáva.