Canvas: CSS Sprites Generator

This content is over 12 years old. It may be obsolete and may not reflect the current opinion of the author.


CSS sprites is a CSS technique that concentrate small images into a large one, in order to cut short http request required. I made this tool to ease the process of making such image.

While there are many other tools available on the net, this one uses <canvas> to make the sprites image. No server-side script involved; you don’t have to upload images to my server. The only downside is that I didn’t aware only Firefox provide the “Save As…” option on context menu; unless you use Firefox, you won’t be able to save the work you made. And no, canvas2image won’t work due to security constraint.

Please give it a try and tell me if you have any feed back: Canvas: CSS Sprites Generator.

CSS sprite 是把很多小圖示/片組合起來,在畫面呈現時再用 CSS 切開的技巧。好處是這樣可以大大的減少需要的 HTTP Request 次數與傳輸量。要組合那張圖片,網路上有很多工具,不過我用了瀏覽器的 <canvas> 功能寫了一個:Canvas: CSS Sprites Generator

用 canvas 的好處是,你不用把檔案傳到我的機器上,所有的合成都仰賴瀏覽器。倒是寫完之後才發現在 canvas 上面按右鍵只有 Firefox 可以選「另存新檔…」呀,其他瀏覽器都不行;真是辛酸。



8 thoughts on “Canvas: CSS Sprites Generator

  1. 感覺還不錯不過我現在沒時間玩XDb

  2. Hello Tim

    Thank you for the chance to use your sprite generator. It has been of gr8 use 2 me recently.

    I do however have one small issue & that is only the right hand side of the sprite when i have created it, there seems to be an very faint/invisible vertical extra sprite row that is created with the same spacing as my template. So when i use this sprite image on my website template i get an banding of whatever background color i change my template to even white.

    Can you look into this please Tim.


  3.  Hello again Tim

    Below is a link to a slice of the edge of the sprite i mention above.

    To see it properly just increase magnification in picture viewer. This is an taken from finished sprite image Tim after uploading many many images to get the complete sprite image.

    I know the way round this small problem is i think to use a tiled background image and not a background color in my code, but i am still working on the design so havent decided whether i want to do that yet.


Comments are closed.