CSS-suodatingeneraattori
Rakenna uudelleen järjestettävä ketju CSS-suodatin()- ja backdrop-filter()-funktioita ja esikatsele sitä livenä omalla lataamallasi valokuvallasi kopioitavan CSS-rivin ja PNG-viennin avulla.
Tulos
Jokaisen CSS-suodatingeneraattorin avulla voit pinota blur(), kirkkaus(), kontrasti() ja muut – mutta melkein mikään niistä ei anna järjestyksellä olla väliä, koska useimmat käyttävät suodattimia vain yhdessä kiinteässä järjestyksessä. Tämä on erilainen: suodatinketju on todellinen, uudelleen järjestettävä luettelo, joka on rakennettu alkuperäisellä HTML5-vedolla ja pudottamalla, ja kahden funktion uudelleenjärjestäminen muuttaa aidosti renderöityjä pikseleitä, täsmälleen samalla tavalla kuin tuotanto-CSS:ssä. Sumennus, sitten-sävy-käännä näyttää erilaiselta kuin sävy-käännä-sitten-sumennus, ja nyt näet syyn ennen kuin lähetät sen.
Lataa oma valokuvasi ja yhdeksän ketjutettavaa toimintoa – sumeus, kirkkaus, kontrasti, kylläisyys, värisävyn kierto, seepia, harmaasävy, käänteinen ja varjostus – käytä sitä livenä varsinaisena "suodattimen" CSS-ilmoituksena "<img>"-elementissä, ei simuloituna mallikappaleena. Lisää valinnasta funktio, vedä sen riviä ylös tai alas luettelossa muuttaaksesi sen sijaintia ketjussa, säädä sen liukusäädintä ja esikatselu ja kopioitava `filter: ...;` rivi päivittyvät jokaiselle syötteelle. Poista askel omalla painikkeellaan, aivan riviltä.
Toinen, pienempi ketju rakentaa "taustasuodattimen" arvon, jota sovelletaan esikatselun päälle sijoitettuun peittopaneeliin, jotta näet himmeä lasiefektin – nykyaikaisten läpikuultavien navigointipalkkien ja modaalitaustan takana olevan tekniikan – koskematta alla olevan kuvan omaan suodatinketjuun. Se toimii jopa ennen valokuvan lataamista värikkäällä paikkamerkkitaustalla, joten voit valita himmeän paneelin sekunneissa.
Kun esikatselu näyttää oikealta, kopioi CSS suoraan tulostelaatikosta tai vie oikea PNG: sama suodatinmerkkijono välitetään Canvas 2D -kontekstin "ctx.filter" -ominaisuuteen, joka käyttää samaa syntaksia CSS-suodattimen ominaisuutena - ja kangas muunnetaan ladattavaksi tiedostoksi "(canvas".toBlob) kanssa. Viety kuva vastaa tarkalleen live-esikatselua, koska sen tuottaa sama suodatinmerkkijono, joka kulkee saman renderöintiprimitiivin läpi. Kaikki tapahtuu paikallisesti selaimessasi; valokuvaasi ei koskaan ladata minnekään.
Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.
Hyväksytyt muodot ja säännöt
- Yhdeksän ketjutettavaa suodatintoimintoa – sumennus, kirkkaus, kontrasti, kylläisyys, värisävyjen kierto, seepia, harmaasävy, käänteinen ja varjostus – jokaisella on oma liukusäädin ja alkuperäinen vetokahva.
- Live-esikatselukuva välittömästi päivittyvällä kopioitavalla suodattimella: CSS-linja, sekä pienempi tausta-suodatinketju ja esittelypaneeli himmeän lasin ilmettä varten.
- Yhden napsautuksen PNG-vienti renderöi ladatun valokuvan täsmälleen saman suodatinmerkkijonon läpi Canvas 2D:n ctx.filter-suodattimen kanssa, mikä vastaa näytön esikatselupikseliä pikseliltä.
Tärkeimmät edut
Käyttötapaukset
- • Ketju sumennus, kirkkaus ja sävy-kierto tuotekuvassa ja vedä sävy-kierto ennen sumennusta nähdäksesi tarkan renderöintieron, ennen kuin sitoudut CSS:ään.
- • Rakenna huurretusta lasista valmistettu navigointipalkin peitto tausta-suodatinketjulla ja kopioi valmis taustasuodatin plus -webkit-vararivi.
- • Vie ladatun kuvan suodatettu PNG-tiedosto, joka vastaa live-CSS-esikatselupikseliä pikseliltä, lataamatta kuvaa palvelimelle.
Arvioi tämä työkalu
