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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
javascript操作css属性
Dec 30 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
vue模板语法-插值详解
Mar 06 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
js实现烟花特效
Mar 02 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的access操作类
2008/04/09 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javascript类型转换使用方法
2014/02/08 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python实现二分法算法实例
2015/02/02 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
超市促销活动方案
2014/03/05 职场文书
受伤赔偿协议书
2014/09/24 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书