Canvas: CSS Sprites Generator

中文說明請往下捲。

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 可以選「另存新檔…」呀,其他瀏覽器都不行;真是辛酸。

總之玩玩吧,希望對你有幫助。有什麼意見歡迎留言。

更新:喔喔喔,加上中文版了!