CSS filtrų generatorius

Kiekvienas CSS filtrų generatorius leidžia sukrauti suliejimą (), ryškumą (), kontrastą () ir kitus dalykus, tačiau beveik nė vienas iš jų nedaro reikšmės tvarkai, nes dauguma filtrus taiko tik viena fiksuota seka. Ši grandinė yra kitokia: filtrų grandinė yra tikras, pertvarkomas sąrašas, sukurtas naudojant vietinį HTML5 vilkimą ir numetimą, o dviejų funkcijų išdėstymas iš naujo iš tikrųjų pakeičia pateiktus pikselius, lygiai taip pat, kaip ir gamybinėje CSS. Sulieti, tada atspalvį pasukti atrodo kitaip nei atspalvį pasukti, tada sulieti, ir dabar prieš išsiųsdami galite sužinoti, kodėl.

Įkelkite savo nuotrauką ir devynias grandinines funkcijas – suliejimą, ryškumą, kontrastą, sodrumą, atspalvių pasukimą, sepiją, pilkos spalvos toną, apvertimą ir nuleidžiamą šešėlį – taikykite jai kaip tikrą „filtro“ CSS deklaraciją „<img>“ elemente, o ne kaip imituojamą pavyzdį. Pridėkite funkciją iš pasirinkimo, vilkite jos eilutę sąraše aukštyn arba žemyn, kad pakeistumėte jos padėtį grandinėje, pakoreguokite jos slankiklį ir peržiūrą bei kopijuojamą „filtro: ...;“ eilutę atnaujinkite kiekvieną įvestį. Pašalinkite žingsnį su atskiru mygtuku, esančiame eilėje.

Antroje, mažesnėje grandinėje sukuriama „fono filtro“ vertė, taikoma perdangos skydelyje, esančiame virš peržiūros, todėl galite pamatyti matinio stiklo efektą – šiuolaikinių permatomų naršymo juostų ir modalinio fono techniką – neliesdami pačios pagrindinio vaizdo filtrų grandinės. Jis veikia net prieš įkeliant nuotrauką spalvingame rezervuotos vietos fone, todėl per kelias sekundes galite surinkti matinio skydelio dizainą.

Kai peržiūra atrodo tinkama, nukopijuokite CSS tiesiai iš išvesties laukelio arba eksportuokite tikrą PNG: ta pati filtro eilutė perduodama Canvas 2D konteksto ypatybei „ctx.filter“, kuri naudoja identišką sintaksę kaip CSS „filtro“ ypatybę, ir drobė konvertuojama į atsisiunčiamą failą su „().toBlob“. Eksportuotas vaizdas tiksliai atitinka tiesioginę peržiūrą, nes jį sukuria ta pati filtro eilutė, einanti per tą patį atvaizdavimo primityvų elementą. Viskas vyksta lokaliai jūsų naršyklėje; tavo nuotrauka niekada niekur neįkelta.