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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python元组操作实例解析
2014/09/23 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
Java中实现多态的机制是什么?
2014/12/07 面试题
DataReader和DataSet的异同
2014/12/31 面试题
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
微博营销计划书
2014/01/10 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
结婚保证书
2015/01/16 职场文书