09月30, 2018

HTML5在线合成雪碧图工具

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

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

alt

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

前段时间使用网上一些其他雪碧图合成工具,感觉不太好用,还是决定自己造一个轮子。 体验地址:IFE Css Sprites

alt

工具介绍

  1. 自定义图片间隔,默认为2,建议不要设置为0,因为图片完全贴合在一起,可能导致元素边脚处出现其他图片的内容。
  2. 支持三种排列方式,支持自动计算最小面积排列方式。
  3. 支持高倍屏css设置。
  4. 支持重做,只需要点击右上角RE MAKE按钮,即可重新开始,可以重新选择图片制作。

使用说明

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

1、上传图片

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

2、设置

alt
使用右侧设置,distance表示图片之间的间隔,不建议设置为0,图片之间的一点点间隔不会对图片大小产生很大影响。
align表示图片排列方式,可选minimizehorizontalvertical。默认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)
  3. s1永远处于Box的左上角。BoxH 不变,BoxW 可以无线延伸
  4. 判断第2个矩形(s2)能不能放到 Box 按照从左到右,从高到底这个顺序的空隙里面
    • 如果可以:放入 并 判断 BoxW 是否需要延伸
    • 如果不可以:放到s1的右边,BoxW 延伸
  5. 继续第3步,判断s3, s4, s5......

扩展思路

  1. 根据Box的初始高度,可以得到最终最小面积(Best)的第一个样本(Sample)
  2. 通过阶梯增加Box的高度(boxHeightStep),得到多个样本
  3. 比较每个样本的 面积利用率(U),取最高的那个

相关代码存放在GitHub上,欢迎star,欢迎issue。如对该算法有兴趣,可以在GitHub上查看。当然,这肯定不是最佳算法~@~

本文链接:https://luodao.me/post/auto-css-sprite-tool.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。