CSS Filtru Ģenerators
Veidojiet pārkārtojamu CSS filter() un backdrop-filter() funkciju ķēdi un priekšskatiet to uz sava augšupielādētā fotoattēla, ar kopējamu CSS rindu un PNG eksportu.
🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.
Rezultāts
Katrs CSS filtru ģenerators ļauj kraut kopā blur(), brightness(), contrast() un pārējos — bet gandrīz neviens neļauj secībai būt nozīmīgai, jo lielākā daļa filtrus vienmēr piemēro tikai vienā fiksētā secībā. Šis ir citādāks: filtru ķēde ir reāls, pārkārtojams saraksts, veidots ar HTML5 vilkšanas nomešanu, un divu funkciju secības maiņa patiešām maina atveidotos pikseļus, tieši tā, kā tas notiktu ražošanas CSS. Vispirms blur, tad hue-rotate izskatās citādāk nekā vispirms hue-rotate, tad blur, un tagad jūs varat redzēt, kāpēc, pirms to nosūtāt.
Augšupielādējiet savu fotoattēlu, un deviņas ķēdē savienojamas funkcijas — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert un drop-shadow — tam tiek piemērotas kā faktiska `filter` CSS deklarācija uz `<img>` elementa, nevis imitēts paraugs. Pievienojiet funkciju no izvēles, velciet tās rindu uz augšu vai leju sarakstā, lai mainītu tās pozīciju ķēdē, pielāgojiet tās slīdni, un priekšskatījums un kopējamā `filter: ...;` rinda atjaunojas pie katras ievades. Noņemiet soli ar tam paredzēto pogu, tieši rindā.
Otra, mazāka ķēde veido `backdrop-filter` vērtību, kas tiek piemērota pārklājuma panelim, kurš novietots virs priekšskatījuma, lai jūs varētu redzēt matēta stikla efektu — paņēmienu, kas slēpjas aiz modernām caurspīdīgām navigācijas joslām un modālo logu foniem — neaizskarot pamata attēla paša filtru ķēdi. Tas darbojas pat pirms fotoattēla augšupielādes, uz krāsainā viettura fona, tāpēc jūs varat noskaņot matēta paneļa dizainu dažās sekundēs.
Kad priekšskatījums izskatās labi, kopējiet CSS tieši no izvades lodziņa vai eksportējiet īstu PNG: tā pati filtru virkne tiek nodota Canvas 2D konteksta `ctx.filter` īpašībai — kas izmanto identisku sintaksi CSS `filter` īpašībai — un kanva tiek pārveidota par lejupielādējamu failu ar `canvas.toBlob()`. Eksportētais attēls precīzi atbilst priekšskatījumam, jo to rada tā pati filtru virkne, kas darbojas caur to pašu atveidošanas primitīvu. Viss notiek lokāli jūsu pārlūkā; jūsu fotoattēls nekad nekur netiek augšupielādēts.