HTML5在线合成雪碧图工具

css sprite，也称雪碧图或css精灵图，是前端常见的小图片优化手段。雪碧图通过将多张小图片合成一张大图片，并配合css中background-size、background-position以达到减小小图片请求个数的目的，从而提升页面加载速度。

对一些小图片比较多的网页，使用雪碧图的优势还是比较明显的，类似下面这种雪碧图，如果拆开，使用单个图片，那么可想而知，浏览器得发起无数个图片请求。而使用雪碧图，则只需要一个请求即可，整个的图片大小也不会变大。

关于雪碧图，这里不赘述，下面介绍一下自己手撸的一个雪碧图合成工具。

工具介绍

使用说明

使用方法很简单，只需要上传所需小图片即可自动生成合成图片和对应的css。

1、上传图片

选中所有你所需要合成的文件，点击确定即可。点击确定之后将使用默认设置自动生成合成图片和对应的css。

2、设置

使用右侧设置，distance表示图片之间的间隔，不建议设置为0，图片之间的一点点间隔不会对图片大小产生很大影响。

align表示图片排列方式，可选minimize、horizontal或vertical。默认minimize，表示通过计算获取面积最小的排列方式。horizontal将按照图片顺序横向排列，vertical将图片按照图片顺序竖向排列。

ZOOM SETTING表示放大设置，在高清屏上，我们通常需要使用2倍图或更高倍数图片，这里默认使用2倍样式。修改放大倍数后，对应的css代码将会更改。

设置完成后，点击Apply changes使配置生效，将使用新配置，重新生成图片和css。

3、重做

如果你有一系列小图标需要合成，可以在完成一个大图后，点击设置栏右上角`RE MAKE`按钮，将清空之前的所有图片，此时可以重新上传其他小图片进行合成。注意：此操作保留你之前的设置，重新上传的小图会使用当前的设置进行合成而非默认设置。

关于总面积最小图片排列算法

主要参考 http://www.aaai.org/Papers/ICAPS/2003/ICAPS03-029.pdf 算法。

基本思路

1. 排列矩形集合（S），按照高度从高到低进行排序

2. 取最高的1个矩形（s1）的宽高作为容器（Box）的初始宽高（BoxW，BoxH）

2. s1永远处于Box的左上角。BoxH 不变，BoxW 可以无线延伸

3. 判断第2个矩形（s2）能不能放到 Box 按照从左到右，从高到底这个顺序的空隙里面

- 如果可以：放入 并 判断 BoxW 是否需要延伸

- 如果不可以：放到s1的右边，BoxW 延伸

4. 继续第3步，判断s3, s4, s5......

扩展思路

1. 根据Box的初始高度，可以得到最终最小面积（Best）的第一个样本（Sample）

2. 通过阶梯增加Box的高度（boxHeightStep），得到多个样本

3. 比较每个样本的 面积利用率（U），取最高的那个

相关代码存放在https://github.com/AspenLuoQiang/ife-css-sprites上，欢迎star，欢迎issue。如对该算法有兴趣，可以在GitHub上查看。当然，这肯定不是最佳算法~@~