位置: 编程技术 - 正文

Node.js使用gm拼装sprite图片(nodejs拼接路径的方法)

编辑:rootadmin

推荐整理分享Node.js使用gm拼装sprite图片(nodejs拼接路径的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nodejs gm,nodejs gyp,nodejs拼接路径的方法,nodejs拼接路径的方法,nodejs package,node.js pkg,nodejs gm,nodejs gm,内容如对您有帮助,希望把文章链接给更多的朋友!

从设计图切图得到了个小图标,是按钮的两种状态,然后我就寻思着把他们拼成一张sprite图片.

之前用过gulp的sprite插件,但这次我不想搞的太隆重.拼图我知道有个很好用的命令行工具 GraphicsMagick 及配套的nodejs包gm

首先说下我要拼的图片,我打算将正常状态作为第1行,激活状态作为第2行.这样可以少计算一些background-position.

折腾过程比较痛苦,本来我打算看一下GraphicsMagick与gm的官方文档,结果好多生单词,最后还是放弃了.下面说答案吧:

总的来说有两种方法,

1.使用gm包的append+adjoin方法

这个方法有缺点,就是不能方便的排序成我想要的这种布局.用adjoin我实际上拼了3次图,才最终得到sprite.参考代码如下:

代码很初级.

2.使用GraphicsMagick自带的命令行工具

Node.js使用gm拼装sprite图片(nodejs拼接路径的方法)

是直接使用GraphicsMagick的命令行(安装后,即可在命令行里使用gm命令),但这里要注意:powershell中使用gm一直报错,需要用cmd并cd到对应目录.win自作聪明的用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参数. 其默认值是'×>+4+3′,表示”每张小图的最大尺寸是×,大于此尺寸的会被缩放(小于的不会放大),图片之间的间隔是横向4纵向3″.

-geometry的参数是按需传的,比如我传的只是+0+0,表示不限制每张图的大小,图片间距为0.

最后一个参数,就是输出拼图结果到rrr.png了.

搞懂这些参数后, 下面的由本方法衍生出来的方法就好理解了.

3.使用gm包执行GraphicsMagick命令行

gm包本身十分强大,但它也提供了生成命令并执行的接口.如上面的命令行, 用gm包可以这么写:

与直接使用命令行是一样的效果.但这样写成js文件后,下次要用或要发给别人用都更方便了.

详解node如何让一个端口同时支持https与http 众所周知node是一个高性能的web服务器,使用它可以很简单的创建一个http或https的服务器。比如一个很简单的http服务器:varhttp=require('http');varhttps=require('

详解HTTPS 的原理和 NodeJS 的实现 基本原理HTTP协议采用明文传输数据,当涉及敏感信息的传送时,极有可能会受到窃听或者中间人的攻击。HTTPS是HTTP与SSL/TLS的组合,即使用加密通讯以及

nodejs模块学习之connect解析 nodejs发展很快,从npm上面的包托管数量就可以看出来。不过从另一方面来看,也是反映了nodejs的基础不稳固,需要开发者创造大量的轮子来解决现实的

标签: nodejs拼接路径的方法

本文链接地址:https://www.jiuchutong.com/biancheng/382133.html 转载请保留说明!

上一篇:mac上node.js环境的安装测试(mac安装nodejs的权限问题)

下一篇:详解node如何让一个端口同时支持https与http(node使用)

  • 收到所得税汇算退税计入补贴收入
  • 冲减营业税金及附加的分录
  • 生产设备租赁费计入什么科目
  • 企业所得税业务费扣除标准
  • 企业名称变更后原名称还能使用吗
  • 哪些营业外收入需要缴纳增值税
  • 发行债券支付的费用要减吗
  • 个人之间的房屋抵押需要去房管局做登记吗
  • 购买礼品赠送客户进项税处理
  • 展览费怎么开票
  • 年终奖需要计入工资交社保吗
  • 环评公司的成本核算
  • 企业在开办期间发生的费用如何处理
  • 资产相关的递延收益
  • 上月开的红字发票本月可以作废吗
  • 外贸企业出口收入确定
  • 增值税专用发票的税率是多少啊
  • 顶账的固定资产怎么入账
  • 取得劳务费的账务处理
  • linux路由器配置实例
  • 电脑维修中常用的软件
  • 银行余额调节表例题和答案
  • linux怎么增加磁盘空间
  • 购置资产是什么财务活动
  • 苏必利尔湖位置地图
  • 加勒比海百科
  • 其他应付款不需要支付的怎么处理,预算会计
  • 数据持久化操作
  • php中strstr
  • vue组件引入外部js
  • php中实现文件上传需要用到哪几个函数
  • Yii2实现ajax上传图片插件用法
  • 以物易物双方做什么处理
  • 落日时光
  • Vue3通透教程【一】Vue3现状—必然趋势?
  • php floatval
  • 检测命令
  • 管家婆付款单凭证科目如何修改
  • 异地托收承付结算ppt
  • 销货清单要放凭证里吗
  • 子公司注销时的账务处理
  • 公司的财产保险业务
  • mongodb operator
  • mysql添加远程访问
  • 库存商品总分类账范本
  • 生育津贴是否需要缴纳增值税
  • 公允价值变动损益属于什么科目
  • 日后事项中所得税的处理方法
  • 稀释股权违法吗
  • 结转主营业务成本是什么意思
  • 转回小规模
  • 小规模纳税人怎么申报个人所得税
  • 金蝶k3如何反记账
  • 企业会计准则解释第16号
  • 把excel表格里的文字复制到word
  • 通过SQL Server的位运算功能巧妙解决多选查询方法
  • mysql5.7.19 winx64安装配置方法图文教程(win10)
  • Windows10 64位安装MySQL5.6.35的图文教程
  • centos 安装
  • 手动ghost恢复
  • windows临时文件在哪里
  • ubuntu怎么解压缩文件
  • Win10系统无法访问局域网共享电脑怎么办
  • linux中软链接和硬链接的区别
  • [置顶]JM259194
  • vue中使用node
  • cocos2dx4.0入门
  • python文本
  • jquery validator
  • vue微信分享功能
  • Python 常用库
  • JavaScript中的数据类型分为两大类
  • android:fragment
  • 天津怎么网上交电费
  • 安徽增值税普通发票税率1%
  • 国家税务网上办税平台
  • 纳税申报期过了怎么处理
  • 2022年中国烟草营收
  • 地方税务局是事业单位吗
  • 税收筹划可分为
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设