CSS filtru ģenerators

Katrs CSS filtru ģenerators ļauj sakraut izplūšanu (), spilgtumu (), kontrastu () un pārējo, taču gandrīz neviens no tiem neļauj secībai būt nozīmei, jo lielākā daļa filtrus izmanto tikai vienā fiksētā secībā. Šī ir atšķirīga: filtru ķēde ir īsts, pārkārtojams saraksts, kas izveidots, izmantojot vietējo HTML5 vilkšanu un nomešanu, un divu funkciju pārkārtošana patiesi maina renderētos pikseļus tieši tāpat kā ražošanas CSS. Aizmiglot-tad-nokrāsu-pagriezt izskatās savādāk nekā nokrāsu-pagriezt-tad aizmiglot, un tagad pirms nosūtīšanas varat noskaidrot, kāpēc.

Augšupielādējiet savu fotoattēlu un deviņas ķēdējamās funkcijas — aizmiglojums, spilgtums, kontrasts, piesātinājums, nokrāsu pagriešana, sēpija, pelēktoņu apgriešana, invertēšana un nolaižamā ēna — piemērojiet tam reāllaikā kā faktisku "filtra" CSS deklarāciju elementā "<img>", nevis imitētu paraugu. Pievienojiet funkciju no atlases, velciet tās rindu uz augšu vai uz leju sarakstā, lai mainītu tās pozīciju ķēdē, pielāgojiet tās slīdni, kā arī priekšskatījums un kopējamā filtrs: ...; rinda tiek atjaunināta katrā ievadē. Noņemiet soli ar savu pogu, turpat rindā.

Otra, mazāka ķēde izveido fona kolāžas filtra vērtību, kas tiek lietota pārklājuma panelim, kas novietots virs priekšskatījuma, lai jūs varētu redzēt matēta stikla efektu — paņēmienu, kas ir aiz modernām caurspīdīgām navigācijas joslām un modāla fona —, nepieskaroties pamata attēla filtra ķēdei. Tas darbojas pat pirms fotoattēla augšupielādes uz krāsainā viettura fona, tāpēc dažu sekunžu laikā varat sastādīt numuru ar matēta paneļa dizainu.

Kad priekšskatījums izskatās pareizi, nokopējiet CSS tieši no izvadlodziņa vai eksportējiet īstu PNG — tā pati filtra virkne tiek nodota Canvas 2D konteksta rekvizīta ctx.filter, kas izmanto identisku sintakse kā CSS filtra rekvizītu, un audekls tiek pārveidots par lejupielādējamu failu ar `().toBlob. Eksportētais attēls precīzi atbilst tiešajam priekšskatījumam, jo ​​to veido viena un tā pati filtra virkne, kas darbojas ar to pašu renderēšanas primitīvu. Viss notiek lokāli jūsu pārlūkprogrammā; jūsu fotoattēls nekad nekur netiek augšupielādēts.