从设计图切图得到了12个小图标,是按钮的两种状态,然后我就寻思着把他们拼成一张sprite图片.
之前用过gulp的sprite插件,但这次我不想搞的太隆重.拼图我知道有个很好用的命令行工具 GraphicsMagick 及配套的nodejs包gm
首先说下我要拼的图片,我打算将正常状态作为第1行,激活状态作为第2行.这样可以少计算一些background-position.
折腾过程比较痛苦,本来我打算看一下GraphicsMagick与gm的官方文档,结果好多生单词,最后还是放弃了.下面说答案吧:
总的来说有两种方法,
1.使用gm包的append+adjoin方法
这个方法有缺点,就是不能方便的排序成我想要的这种布局.用adjoin我实际上拼了3次图,才最终得到sprite.参考代码如下:
gm('nav1_1.png-600') .append('nav2_1.png-600','nav3_1.png-600','nav4_1.png-600','nav5_1.png-600','nav6_1.png-600', true) .adjoin().write('./result.png-600', function(err) { console.log(err); }); gm('nav1_0.png-600') .append('nav2_0.png-600','nav3_0.png-600','nav4_0.png-600','nav5_0.png-600','nav6_0.png-600', true) .adjoin().write('./result1.png-600', function(err) { console.log(err); }); gm('result1.png-600').append('result.png-600').adjoin() .write('nav-icons.png-600', (err, data) => { if(err) console.error(err); console.log(data); })
代码很初级.
2.使用GraphicsMagick自带的命令行工具
是直接使用GraphicsMagick的命令行(安装后,即可在命令行里使用gm命令),但这里要注意:powershell中使用gm一直报错,需要用cmd并cd到对应目录.win10自作聪明的用powershell默认代替cmd,结果连这种错误都没修复…
gm montage nav*_0.png-600 nav*_1.png-600 -tile 6x2 -geometry +0+0 rrr.png-600
可以看到我使用了 montage 方法,且分两次传入了图片(图片路径还支持glob表达式), 分两次传入图片路径可以保证先后顺序(因为我就是想拼两行啊).
简单讲一下montage,其中文表述即”蒙太奇”,高大上,但我们这里只用来拼图. 命令之后就是图片路径; 路径之后有个 `-tile` 参数, 用来指定图片的排列方式.6×2就是6列2行.这里有个技巧,如果你想让所有图片排成一行,可以这样 `-tile x1`,即不管列数,只限制为1行,反之, `-tile 1x`则表示只要1列不管有多少行.
-tile参数后是-geometry参数. 其默认值是'120×120>+4+3′,表示”每张小图的最大尺寸是120×120,大于此尺寸的会被缩放(小于的不会放大),图片之间的间隔是横向4纵向3″.
-geometry的参数是按需传的,比如我传的只是+0+0,表示不限制每张图的大小,图片间距为0.
最后一个参数,就是输出拼图结果到rrr.png-600了.
搞懂这些参数后, 下面的由本方法衍生出来的方法就好理解了.
3.使用gm包执行GraphicsMagick命令行
gm包本身十分强大,但它也提供了生成命令并执行的接口.如上面的命令行, 用gm包可以这么写:
gm().command('montage') .in('nav*_0.png-600') // 图片路径分开 in, 不要连在一个 in 里面 .in('nav*_1.png-600') .in('-tile', '6x2') .in('-geometry', '+0+0') .write('rrrr.png-600', (err, a,b,c) => { console.log(err, 'a:', a, 'b:', b, 'c:', c); });
与直接使用命令行是一样的效果.但这样写成js文件后,下次要用或要发给别人用都更方便了.
以上就是Node.js使用gm拼装sprite图片的详细内容，更多请关注本站其它相关文章！
