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事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
js的对象与函数详解
Jan 21 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 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采集腾讯微博的实现代码
2012/01/19 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
对Python中range()函数和list的比较
2018/04/19 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python-for循环的内部机制
2020/06/12 Python
精伦电子Java笔试题
2013/01/16 面试题
工程师岗位职责
2013/11/08 职场文书
迟到检讨书400字
2014/01/13 职场文书
四查四看剖析材料
2014/02/14 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
党员个人对照检查材料
2014/10/01 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
会议邀请函
2015/01/30 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Python的property属性详细讲解
2022/04/11 Python