Instant Sprite

Instant Sprite is a CSS Sprite Generator I built to learn some of the new (at the time) JavaScript APIs and to make it easier to follow the good practice of using CSS Sprites. I found it annoying to make sprites, especially if it required opening up an image editor and calculating offsets manually. I wanted to make the tool as easy as possible to fit my workflow. I use it now when doing any design work.

Instant Sprite uses HTML Canvas and the FileReader interface to read images from your hard drive - this prevents you from having to zip up all the images before passing them off to the sprite generator. You can also preview your changes to CSS tweaks in real time, so you don't have to resubmit if the file match regex isn't doing what you want.

All the code is available online here: https://github.com/bgrins/InstantSprite