This content is over 15 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 可以選「另存新檔…」呀，其他瀏覽器都不行；真是辛酸。
總之玩玩吧，希望對你有幫助。有什麼意見歡迎留言。
更新：喔喔喔，加上中文版了！
感覺還不錯不過我現在沒時間玩XDb
最大的問題大概是：你能弄個中文介面嗎XD
既然 NEKO 都說了那中文版是一定要做的呀，哇哈哈！
Nice interface! Thanks!
謝謝了
抓sprite 座標和組圖都容易方便多
不用再Photoshop去抓xy座標
Thanks
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.
Andrew
What is the browser you are using?
Tim,
tx 4 getting to me. I am using Firefox.
Hello again Tim
Below is a link to a slice of the edge of the sprite i mention above.
http://i49.tinypic.com/2jbmvky.png
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.
Andrew