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

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

Go!Png介绍:

目前实现的功能如下:

  1. 支持图片文件拖拽
  2. 支持生成png图片与css文件
  3. 支持两种自动排列的模式
  4. 放大镜功能
  5. 磁力吸附对齐功能
  6. 工作状态导出功能,可以方便导出文件,在下一次操作通过拖放改文件来恢复工作状态(包括图片数据跟参数设置)
  7. 支持Mac(Chrome) :)

使用说明:

1.拖拽图片小文件到操作区域,如下图:

2.输入类属性设置与目标图片、css文件生成,如下图

3.生成的css文件是可以通过改变css模版来定制的

使用的模版函数是John Resig的Micro-Templating,
可以用的变量有:
  • x 图片的x坐标
  • y 图片的y坐标
  • w 图片的宽度
  • h 图片的高度
  • name 图片文件的名称(不带后缀)
  • absolute_path 绝对路径(自定义)
  • relative_path 相对路径(自定义)
x、y、w、h的解释如下图:
css模版的设置操作如下图:

4.生成目标图片、css后可以直接下载

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

5.工作状态导出

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/05/gopng-sprite-figure-synthesis-tool-another-html5-app/

  1. 如果想在一个已经在用的精灵图上添加一个图标,而原来的精灵图中是有空白的,能不能把新的图标加到这个空白处而不是加到原有精灵图之外呢

  2. 我其实更需要一个拼序列帧动画的工具,序列帧的图由于里面内容不同,可能大小不一,但我希望最终导出来的图大小是一致的,或者你们都用什么工具来做这件事情

  3. 有个问题,我传白色的图片上去后就很难辨认出图片了。所以还是加一个切换背景颜色的功能吧!PS:工具很好用!

  4. 腾讯请你们简直是一种浪费啊
    看DW里的插件 直接在DW 的CSS的面板CSS背景里直接显示图片 点击就自动填写坐标数值了。比那个BG2CSS更TM牛

  5. 赞!能否提供将 sprite 导出 js 数组的功能,将每个图片的参数信息(left,top,width,height)存入一个 js 数组,如
    var d = [
    [307, 48, 88, 89],
    [307, 48, 89, 89],
    [307, 48, 91, 89,1],
    …..]
    甚至可以加入其他的自定义参数

  6. Pingback: NodeJs智能合并CSS精灵图工具IntelligentSpriter | Tencent AlloyTeam

  7. Pingback: NodeJs智能合并CSS精灵图工具IntelligentSpriter - imAtlas

  8. 这个好像就是firework里面的切片工具什么的
    不过html5 就不需要开这些大型怪兽了。。。。。。

  9. Pingback: 【转载】HTML5开发的在线雪碧图片合成工具GoPng_HTML5研究小组_HTML5教程_HTML5资源_HTML5游戏