CSS-sprite-generaattori

Yhdistää useit ladattuja kuvia yhteen PNG-sprite-taulukkoon ja luo vastaavat background-position CSS-komennot. Kolme asettelua on tuettu (vaakasuora, pystysuora ja ruudukko), jossa on valinnainen väli tilejen välissä ja määritettävä sarakesäärRuudukko-asettelussa. Kaikki koostaminen tapahtuu canvas-selaimessa; kuvia ei ladata mihinkään.

1. Napsauta latausaluetta tai vedä kuvatiedostoja sinne lisääksesi ne (monta tiedostoa tuettu). 2. Valitse asettelu (vaakasuora, pystysuora, ruudukko) ja aseta ruudukolle sarakesäärä. 3. Aseta tarvittaessa väli pikseleinä tileiden välissä. 4. Napsauta Luo Sprite rakentaaksesi taulukon uudelleen, sitten Lataa Sprite PNG-tiedostolle ja Kopioi CSS .icon-*-sääntöjä varten.

vaakasuora pinoo kuvat vasemmalta oikealle käyttäen korkeinta kuvaa rivikorkeutena. pystysuora pinoo kuvat ylhäältä alas käyttäen leveintä kuvaa sarakkeen leveytenä. ruudukko pakkaa kuvat sarakemajoriteettiseen ruudukkoon, jossa jokainen sarake ja rivi on mitoitettu suurimman jäsenensä mukaan. Generoitu CSS käyttää luokkanimiä, jotka on johdettu tiedostonimestä (tarkennus poistettu, ei-alfa-numeeriset merkit korvattu -merkillä), esim. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. Tuloste PNG viedään canvas.toDataURL:n kautta ja on aina PNG riippumatta syötemuodosta.