nodejs gm drawText使用(中文、字体、大小及颜色)

本文详细介绍了如何使用nodejs的gm库在图片上添加文字,包括基本用法、设置中文、调整字体大小和颜色。在处理中文时,需要额外引入字库。此外,还提供了fontSize和fill方法来改变字号和填充颜色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

node党悲催的发现,图片处理工具只有一个gm可以选。gm无非是调用了GraphicsMagick/ImageMagick而已,性能不敢恭维。但是有很多后台生成图片的场景,没办法,只能硬着头皮上了。

前文 ( nodejs图片处理工具gm用法 ) 总结了nodejs gm的基本操作,本篇细说给图片添加文字的接口drawText。

基本用法

gm("test.png")
.drawText(x, y, text [, gravity])

如果没有gravity参数,那么就将text绘制到图片中的(x,y)坐标处。
如果带有gravity参数,从(x,y)坐标开始到右下角构成的图片范围内,依据gravity含义绘制文字。
gravity选项如下:

NorthWest, North, NorthEast, West, Center,
East, SouthWest, South, or SouthEast

用法示例:

值得注意的是,在带有gravity的情形下,(x,y)坐标能起到对位置的调整作用,而且还可以取负值

gm('test.png')

.drawText(100, 100, 'Hello')            //绘制到(100,100)位置处

.drawText(0, 0, 'Hello', 'Center'); //绘制到图片正中间

.drawText(0, 10, 'Hello', 'Center');    //图片上面裁除10px,剩下部分的中心。等同于原图中心往下5px

.drawText(0, -10, 'Hello', 'Center');   //同上,等同于原图中心往上5px

.drawText(0, 0, 'Hello', 'NorthEast');  //原图右上角

中文

gm不能直接绘制中文,需要在绘制的时候引入相应的字库。

gm('test.png')
.font('./fonts/heiti.ttf')      //引入预先下载的黑体字库
.drawText(10, 10, '这是一个测试')

字体大小

可以通过fontSize修改字号。

gm('test.png')
.fontSize(36)           //字体大小36
.drawText(10, 10, '这是一个测试')

字体颜色

通过fill修改填充颜色。

gm('test.png')
.fill('#ffffff')        //设置白色
.drawText(10, 10, '这是一个测试')

字体、大小和颜色,有了这些,基本上就可以自由的在图片上绘制了。

参考

官方文档:GraphicsMagick for node.js

How do I change the color of text I’m drawing with node graphicsmagick?

Nodejs图片编辑和中文乱码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值