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同时提交多个Web表单的方法
Dec 26 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
js canvas实现俄罗斯方块
Oct 11 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
BBS(php & mysql)完整版(六)
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
毕业自荐信
2013/12/16 职场文书
客服专员岗位职责
2014/02/28 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
python基础入门之字典和集合
2021/06/13 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL