位置: 编程技术 - 正文

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

  • 公司租的住宅和商品房
  • 住房补贴需要交什么材料
  • 月末进项税大于销项税怎么结转
  • 子公司利润母公司要交税吗?
  • 合同负债里面含增值税吗
  • 个人所得税申报是什么意思?
  • 管理人员工作服计入什么科目
  • 购买方已抵扣开具红字信息表之后做账需要什么原始凭证
  • 法定盈余公积和法定公积金一样吗
  • 处置固定资产增值税和所得税报税能一致吗
  • 未交增值税金额公式
  • 法人转钱到公户是借款还是投资款
  • 平行登记要求总账
  • 股权转让的溢价要交什么税
  • 个人账户付款可以开公司发票吗
  • 弱电系统安装的注意要点
  • 开水电发票要增加什么经营项目?
  • 专票进项税可以抵扣几个月以前的
  • 个人所得税申报错误如何更正申报
  • 研发费加计扣除75%政策
  • 每个月工资都不一样,怎么计算个税
  • 货物销售价比采购价高
  • 公司账户收到车险怎么做账
  • 所得税年报报完了怎么更正季报
  • 地价计入房产
  • 深度操作系统的窗口管理器
  • 如何查询公司有没有报个税
  • 汇算清缴时业务招待费税收金额为零是什么原因
  • PHP:oci_define_by_name()的用法_Oracle函数
  • 跨年收到退回增值税税款的账务处理
  • 任意盈余公积金的用途
  • php图片生成视频
  • php parse_str() 函数的定义和用法
  • Win11 Build 23435 预览版今日发布: 文件管理器引入图库功能
  • GPT-4 免费体验方法
  • php两个等号和三个的区别
  • viwer.js
  • vgrename命令 重命名卷组
  • 上年第4季度企业所得税
  • 购买短期股票
  • 财政补助收入分录
  • 购车哪些费用可以免
  • input和printf的区别
  • Packaging a Qt application
  • 关于帝国战争的游戏
  • mongodb unwind
  • 股东转股怎么办理
  • 公司如何减资
  • 运输公司挂靠车辆的会计处理?
  • 加计抵减进项税额怎么计算
  • sql server 2008怎么使用sql语句
  • 承租人融资租赁会计账务处理
  • 转出未交增值税借方余额表示什么
  • 小规模纳税人进项票可以抵扣吗
  • 存货盘点后的检查
  • 支付货代运费账务处理
  • 建筑业异地预缴企业所得税怎么算
  • 预付工程款预算会计怎么做账
  • 公司员工支出
  • 正常在职员工的工作时间
  • sql server本地服务器地址如何查看
  • ccs 运行
  • ubuntu 18.04怎么用
  • 微软推出copilotpro订阅
  • linux calloc
  • windows 10 build 9834
  • win10打不开应用市场
  • bat for do
  • opengl调色
  • jQuery基于xml格式数据实现模糊查询及分页功能的方法
  • css超出内容隐藏
  • js行号显示的文字不一样
  • 怎么查看keytab文件
  • 安卓网络管理类app
  • python定义全局
  • 发票查询打印如何操作
  • 江苏电子税务局网站官网
  • 税务总局各司领导名单
  • 贵州开票软件怎么下载安装
  • 电信业八大争议事件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设