CSS filtrų generatorius
Kurkite pertvarkomą CSS filter() ir backdrop-filter() funkcijų grandinę ir peržiūrėkite ją gyvai ant savo įkeltos nuotraukos, su kopijuojama CSS eilute ir PNG eksportu.
🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.
Rezultatas
Kiekvienas CSS filtrų generatorius leidžia sudėti blur(), brightness(), contrast() ir kitus – bet beveik nė viename iš jų tvarka neturi reikšmės, nes dažniausiai filtrai taikomi tik viena fiksuota seka. Šis yra kitoks: filtrų grandinė yra tikras, pertvarkomas sąrašas, sukurtas su įprastu HTML5 tempimo mechanizmu, o dviejų funkcijų pertvarkymas iš tikrųjų pakeičia atvaizduojamus pikselius, lygiai taip pat, kaip tai veiktų gamybiniame CSS. Blur po hue-rotate atrodo kitaip nei hue-rotate po blur – dabar galite tai pamatyti prieš pateikdami.
Įkelkite savo nuotrauką ir devynios jungiamos funkcijos – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert ir drop-shadow – taikomos jai gyvai kaip tikra `filter` CSS deklaracija ant `<img>` elemento, o ne imituojamas pavyzdys. Pridėkite funkciją iš pasirinkimo, patempkite jos eilutę aukštyn arba žemyn sąraše, kad pakeistumėte jos vietą grandinėje, sureguliuokite slankiklį – ir peržiūra bei kopijuojama `filter: ...;` eilutė atsinaujina po kiekvieno veiksmo. Pašalinkite žingsnį jam skirtu mygtuku, čia pat eilutėje.
Antra, mažesnė grandinė kuria `backdrop-filter` reikšmę, taikomą perdengimo skydeliui, padėtam virš peržiūros, todėl galite pamatyti matinio stiklo efektą – metodą, slypintį po šiuolaikinėmis permatomomis naršymo juostomis ir modalinių langų fonais – neliesdami paties paveikslėlio filtrų grandinės. Tai veikia net neįkėlus nuotraukos, ant spalvingo rezervinio fono, taigi matinio skydelio dizainą galite susikurti per kelias sekundes.
Kai peržiūra atrodo tinkamai, nusikopijuokite CSS tiesiai iš išvesties laukelio arba eksportuokite tikrą PNG: ta pati filtrų eilutė perduodama Canvas 2D konteksto `ctx.filter` savybei – kuri naudoja identišką sintaksę kaip ir CSS `filter` savybė –, o drobė paverčiama atsisiunčiamu failu naudojant `canvas.toBlob()`. Eksportuotas vaizdas tiksliai atitinka gyvą peržiūrą, nes jį sukuria ta pati filtrų eilutė, veikianti per tą patį atvaizdavimo mechanizmą. Viskas vyksta lokaliai jūsų naršyklėje; jūsų nuotrauka niekur neįkeliama.