CSS-suodin generaattori
Rakenna uudelleenjärjesteltävä ketju CSS filter()- ja backdrop-filter()-funktioista ja esikatsele sitä omalla lataamallasi kuvalla – kopioitava CSS-rivi ja PNG-vienti mukana.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
Jokaisella CSS-suodin generaattorilla voit pinota blur(), brightness(), contrast() ja loput – mutta lähes mikään niistä ei anna järjestyksen vaikuttaa, sillä useimmat käyttävät suotimia vain yhdessä kiinteässä järjestyksessä. Tämä on erilainen: suodinketju on aito, uudelleenjärjesteltävä lista, joka on toteutettu HTML5:n natiivilla drag and dropilla, ja kahden funktion siirtäminen todella muuttaa renderöityjä pikseleitä, aivan kuten tuotanto-CSS:ssä. Blur-sitten-hue-rotate näyttää erilaiselta kuin hue-rotate-sitten-blur, ja nyt voit nähdä miksi ennen käyttöönottoa.
Lataa oma kuvasi ja yhdeksän ketjutettavaa funktiota – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert ja drop-shadow – vaikuttavat siihen reaaliajassa todellisena `filter` CSS-määrityksenä `<img>`-elementissä, eivät simuloituna väriläiskänä. Lisää funktio valikosta, vedä sen riviä ylös tai alas listassa muuttaaksesi sen paikkaa ketjussa, säädä liukusäädintä, ja esikatselu sekä kopioitava `filter: ...;` -rivi päivittyvät jokaisella syötteellä. Poista askel omalla painikkeellaan, suoraan rivillä.
Toinen, pienempi ketju rakentaa `backdrop-filter`-arvon, jota sovelletaan esikatselun päälle asetettuun peittopaneeliin, joten näet himmeälasiefektin – tekniikan modernien läpikuultavien navigointipalkkien ja modaalien taustojen takana – koskematta alla olevan kuvan omaan suodinketjuun. Se toimii jo ennen kuvan lataamista, värikästä paikkamerkkitaustaa vasten, joten voit virittää himmeälasipaneelin ulkoasun sekunneissa.
Kun esikatselu näyttää oikealta, kopioi CSS suoraan tulostelaatikosta tai vie aito PNG: sama suodinmerkkijono annetaan Canvas 2D -kontekstin `ctx.filter`-ominaisuudelle – joka käyttää identtistä syntaksia kuin CSS:n `filter`-ominaisuus – ja canvas muunnetaan ladattavaksi tiedostoksi `canvas.toBlob()`-metodilla. Viety kuva vastaa reaaliaikaista esikatselua tarkalleen, koska se tuotetaan samalla suodinmerkkijonolla, saman renderöintiprimitiivin kautta. Kaikki tapahtuu paikallisesti selaimessasi; kuvaasi ei koskaan ladata minnekään.