Philter.js - Free Image Alteration Library, joka käyttää CSS-suodattimia
Instagram on laajalti tunnettu suosituin valokuvaverkko. Se käsittelee yli 52 miljoonaa kuvaa päivässä ja monet niistä sisältää suodattimia jotka muuttavat kuvia lennossa.
Tämä on mahdollista myös CSS-suodattimien avulla sovelletaan suoraan selaimeen. Näillä mukautetuilla suodatusominaisuuksilla on laaja tuki monissa selaimissa ja ne näyttävät hyviltä.
Kanssa Philterin JavaScript-laajennus, voit skaalata tätä prosessia säästääksesi aikaa ja siirtämällä koodin HTML-muotoon dynaamiset suodattimen vaikutukset.
Käyttämällä tätä laajennusta voit saada paljon enemmän hallita kuviasi. Näin voit valita, mitkä suodattimet haluat soveltaa yksittäisiin kuviin ja jos tiettyjen suodattimien tulisi muuttua käyttäjän käyttäytymisen, kuten leijuu, perusteella.
CSS tukee animoituja siirtymiä ja Philter tekee tästä prosessista todella yksinkertaisen. Lataa vain Philter kotisivulta tai GitHub-reposta. Kun se on lisätty Web-sivullesi, vain lisää alustuskoodi ja anna sen mennä.
Tässä on a näytteenpätkä GitHub-reposta:
Oletusarvoisesti voit määrittää siirtymät ja ylimääräiset tietomääritteet voit liittää HTML-tiedostoon. url Parametri määrittää polun, jolla Philterin tulisi etsiä suodatusprosessissa käytettyjä mukautettuja SVG-tiedostoja.
Nämä ylimääräiset suodattimet ovat pakattu kirjastoon, joten sinun ei tarvitse muokata niitä ollenkaan. Voit kuitenkin siirtää niitä ympäri tai sijoittaa ne eri hakemistorakenteeseen nykyisestä tiedostostasi, joten tämä asetus saatetaan joutua muuttamaan.
Nyt voitte vain lisää mukautettuja suodattimia oikeus HTML-koodiin
Tässä on a yksinkertainen esimerkki:
Löydät täydellinen luettelo kaikista suodattimista GitHubissa ja a täydellinen asennusopas ja monet muut koodinäytteet.
Philter on yksi hienoimmista ilmaisista pluginsista ja se työntää nykyaikaisen CSS: n rajat. Voit jopa suunnittele omia suodattimia jos olet valmis kaivamaan koodisivuun ja pyöri.
Jos haluat yksinkertaisen paikan aloittaa, käy vain Philterin kotisivulla ja lataa kopio. Voit saada sen käyttöön ja käyttää sitä nopeasti.
