Go!Png:用html5实现合成Css Sprite雪碧图的工具

武林网(www.vevb.com)文章简介：Css Sprite，有时也称为雪碧图、精灵图，是每一个前端开都会遇到的问题，也是常见的小图片加载优化手段。相信各位同学都清楚其原理，具体就不赘述了。

Css Sprite，有时也称为雪碧图、精灵图，是每一个前端开都会遇到的问题，也是常见的小图片加载优化手段。相信各位同学都清楚其原理，具体就不赘述了。

之前一直有动机利用html5实现一个合成雪碧图的工具，方便小项目的快速开发，减少一些诸如开photoshop、fireworks等工具来合图的机械劳动，最近终于抽出时间将构思实现。

目前实现的功能如下：

使用的模版函数是John Resig的Micro-Templating，

可以用的变量有：

x、y、w、h的解释如下图：

css模版的设置操作如下图：

点击download按钮即可完成下载：

这个功能是可以将你目前的工作状态，包括图片的数据（图片、图片位置排列），参数设置（包括主页的参数设置与css模版设置），全部导出成一个文件，下次利用此文件便可复原工作状态。

导出如下图：

导入如下图：

即可复原：