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 相关文章推荐
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
第一篇初识bootstrap
Jun 21 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 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巧获服务器端信息
2006/12/06 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
SQLite3中文编码 Python的实现
2017/01/11 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python用for循环实现九九乘法表
2018/05/31 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python实现图片转字符小工具
2019/04/30 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python计算二维矩形IOU实例
2020/01/18 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
班主任与学生安全责任书
2014/07/25 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
mysql创建存储过程及函数详解
2021/12/04 MySQL
详解Python中的for循环
2022/04/30 Python