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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
去除html代码里面的script正则方法
May 19 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Vue 监听元素前后变化值实例
Jul 29 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实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
一道python走迷宫算法题
2018/01/22 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python列表操作方法详解
2020/02/09 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
大学生旅游业创业计划书
2014/01/29 职场文书
优秀经理获奖感言
2014/03/04 职场文书
公民代理授权委托书
2014/09/24 职场文书
幼儿园感谢信
2015/01/21 职场文书
人事局接收函
2015/01/30 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
大学生团日活动总结
2015/05/06 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python