Node.js使用gm拼装sprite图片


Posted in Javascript onJuly 04, 2017

从设计图切图得到了12个小图标,是按钮的两种状态,然后我就寻思着把他们拼成一张sprite图片.

之前用过gulp的sprite插件,但这次我不想搞的太隆重.拼图我知道有个很好用的命令行工具 GraphicsMagick 及配套的nodejs包gm

首先说下我要拼的图片,我打算将正常状态作为第1行,激活状态作为第2行.这样可以少计算一些background-position.

折腾过程比较痛苦,本来我打算看一下GraphicsMagick与gm的官方文档,结果好多生单词,最后还是放弃了.下面说答案吧:

总的来说有两种方法,

1.使用gm包的append+adjoin方法

这个方法有缺点,就是不能方便的排序成我想要的这种布局.用adjoin我实际上拼了3次图,才最终得到sprite.参考代码如下:

gm('nav1_1.png')
 .append('nav2_1.png','nav3_1.png','nav4_1.png','nav5_1.png','nav6_1.png', true)
 .adjoin().write('./result.png', function(err) {
   console.log(err);
 });
 gm('nav1_0.png')
 .append('nav2_0.png','nav3_0.png','nav4_0.png','nav5_0.png','nav6_0.png', true)
 .adjoin().write('./result1.png', function(err) {
   console.log(err);
 });
 
 gm('result1.png').append('result.png').adjoin()
   .write('nav-icons.png', (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 nav*_1.png -tile 6x2 -geometry +0+0 rrr.png

可以看到我使用了 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了.

搞懂这些参数后, 下面的由本方法衍生出来的方法就好理解了.

3.使用gm包执行GraphicsMagick命令行

gm包本身十分强大,但它也提供了生成命令并执行的接口.如上面的命令行, 用gm包可以这么写:

gm().command('montage')
   .in('nav*_0.png')
   // 图片路径分开 in, 不要连在一个 in 里面
   .in('nav*_1.png')
   .in('-tile', '6x2')
   .in('-geometry', '+0+0')
   .write('rrrr.png', (err, a,b,c) => {
     console.log(err, 'a:', a, 'b:', b, 'c:', c);
   });

与直接使用命令行是一样的效果.但这样写成js文件后,下次要用或要发给别人用都更方便了.

Javascript 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
JavaScript中document.referrer的用法详解
Jul 04 #Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python编程求质数实例代码
2018/01/31 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python中生成ndarray实例讲解
2021/02/22 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
生产副总岗位职责
2013/11/28 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
小学防溺水制度
2014/01/29 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
活动策划求职信模板
2014/04/21 职场文书
五一活动标语
2014/06/30 职场文书
合作合同协议书范本
2015/01/27 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
名人传读书笔记
2015/06/26 职场文书