位置: 编程技术 - 正文

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使用)

  • 个人经营所得税起征点是多少
  • 汇算清缴加计扣除表
  • 工程设备公司经营范围
  • 合伙律师事务所的合伙人必须是
  • 固定资产怎么进行折旧处理
  • 汇算清缴所得税退税会计分录怎么做
  • 退货未开发票如何做账
  • 丢失海关专用缴款书后该怎么处理其相关会计分录
  • 快递行业的收入与成本
  • 工程结算审核程序
  • 借款合同的印花税税率
  • 一般纳税人为什么要开专票
  • 代账公司收取服务费能开增值税票吗?
  • 顺丰的收派服务费可以抵扣吗
  • 买二手车年限久的会怎样
  • 买烟酒开专票可以抵税吗
  • 建筑劳务增值税
  • 销售设备并安装
  • 残障人士能享受的税收优惠
  • 递延资产摊销属于什么科目
  • 土地增值税清算后补缴税款如何帐务处理
  • 支票进账对方没钱开户行会打电话叫他存钱吗?
  • 收到投资款怎么做记账凭证
  • 公益性捐赠所得税处理
  • 如何创建一个空的dataframe
  • getparameter报错
  • 企业收到的政府补贴,怎么入账
  • 补缴社保公积金
  • 360tray.exe损坏文件怎么修复
  • windows10如何清理磁盘碎片
  • 长期投资损失的确认
  • explorer进程作用
  • 劳动合同到期补偿金怎么算
  • 发票开具的法定义务是什么
  • 企业如何申请进出口资质
  • 北极熊睡觉图片卡通
  • 人工智能aima
  • 【已解决】VUE3+webpack >5报错问题
  • vue使用什么语言
  • 前端脚本开发
  • mysql分区实现
  • python获取值对应的键
  • 帝国cms和thinkphp哪个好
  • phpcms 标签
  • phpcms怎么样
  • 开源 okr
  • 现金流量表四个部分
  • 房地产企业增值税预征率
  • 企业自建房产提款流程
  • 减值准备减少记哪方
  • 赠品视同销售会计分录如何编制?
  • 房地产毛利额纳税调整
  • 小规模纳税人的增值税计入成本吗
  • 税金及附加是什么账户
  • 结转已销商品的销售成本分录
  • 一般纳税人可抵扣的票证有哪些?
  • 如何当好一个农民
  • 固定资产包括哪些东西
  • centos编译器
  • aix解除镜像
  • windows7软件运行没反应
  • 安装并激活navicat
  • xp操作系统还能用吗
  • linux中使用最多的命令
  • 进程出现很多regsvr32
  • diskmakerx制作u盘需要多久
  • linux怎么开启root权限
  • win8.1系统怎么样
  • 安装怎么弄
  • linux卸载repo
  • 基于socket的聊天程序
  • Androidannotation使用之@Rest获取资源及用户登录验证(一)
  • 检测输入条件的各种组合
  • unityc#打不开
  • opengl shader实例
  • python中deque
  • jquery实现全选
  • 北京地税电话咨询
  • 粮食企业所得税优惠
  • 发票红冲产生费用吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设