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实现动态增加文件域表单
Feb 12 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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配置ZendOpcache插件加速
2019/02/14 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
婚礼主持词开场白
2014/03/13 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
供用电专业求职信
2014/07/07 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers