CSS-filtri generaator

Iga CSS-filtri generaator laseb sul virnastada blur(), brightness(), contrast() ja ülejäänud – kuid peaaegu ükski neist ei lase järjekorral tähtsust omada, sest enamik rakendab filtreid vaid ühes fikseeritud järjestuses. See siin on teistsugune: filtri ahel on tõeline ümberjärjestatav loend, mis on ehitatud loomuliku HTML5 lohista-ja-aseta abil, ja kahe funktsiooni ümbertõstmine muudab tegelikult renderdatud piksleid, täpselt nii nagu see juhtuks toodangu CSS-is. Blur-then-hue-rotate näeb välja teistsugune kui hue-rotate-then-blur ja nüüd saad enne tootmisse saatmist aru, miks.

Laadi üles oma foto ja üheksa aheldatavat funktsiooni – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert ja drop-shadow – rakenduvad sellele reaalajas kui tegelik `filter` CSS deklaratsioon `<img>` elemendil, mitte simuleeritud värvinäidis. Lisa funktsioon valikust, lohista selle rida loendis üles või alla, et muuta selle positsiooni ahelas, liiguta liugurit ning eelvaade ja kopeeritav `filter: ...;` rida uuenevad iga sisendi puhul. Eemalda samm selle enda nupuga, otse reas.

Teine, väiksem ahel ehitab `backdrop-filter` väärtuse, mis rakendatakse eelvaate kohale paigutatud ülekattepaneelile, nii näed jäätunud klaasi efekti – tehnikat, mis on tänapäevaste poolläbipaistvate navigeerimisribade ja modaalide taustade taga – ilma aluspildi enda filtri ahelat mõjutamata. See töötab isegi enne foto üleslaadimist värvilise paigutuse taustal, nii saad sekunditega kujundada jäätunud paneeli disaini.

Kui eelvaade näeb välja sobiv, kopeeri CSS otse väljundkastist või ekspordi ehtne PNG: sama filtri string antakse Canvas 2D konteksti `ctx.filter` omadusele – mis kasutab identset süntaksit CSS-i `filter` omadusega – ja lõuend teisendatakse allalaetavaks failiks `canvas.toBlob()` abil. Eksporditud pilt kattub täpselt reaalajas eelvaatega, sest selle loob sama filtri string, mis jookseb läbi sama renderdamise primitiivi. Kõik toimub lokaalselt sinu brauseris; sinu fotot ei laadita kunagi kuskile üles.