nodejs gm drawText使用(中文、字体、大小及颜色)
2016-08-18 13:07
1311 查看
node党悲催的发现,图片处理工具只有一个gm可以选。gm无非是调用了GraphicsMagick/ImageMagick而已,性能不敢恭维。但是有很多后台生成图片的场景,没办法,只能硬着头皮上了。
前文 ( nodejs图片处理工具gm用法 ) 总结了nodejs gm的基本操作,本篇细说给图片添加文字的接口drawText。
如果没有gravity参数,那么就将text绘制到图片中的(x,y)坐标处。
如果带有gravity参数,从(x,y)坐标开始到右下角构成的图片范围内,依据gravity含义绘制文字。
gravity选项如下:
用法示例:
值得注意的是,在带有gravity的情形下,(x,y)坐标能起到对位置的调整作用,而且还可以取负值。
字体、大小和颜色,有了这些,基本上就可以自由的在图片上绘制了。
How do I change the color of text I’m drawing with node graphicsmagick?
Nodejs图片编辑和中文乱码
前文 ( 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.jsHow do I change the color of text I’m drawing with node graphicsmagick?
Nodejs图片编辑和中文乱码
相关文章推荐
- ios使用 KVC 修改textField的placeholder的字体颜色和大小
- Android TextView中文字设置超链接、颜色、字体
- Android TextView中文字设置超链接、颜色、字体
- android textview改变部分文字的颜色和string.xml中文字的替换及部分内容设置颜色、字体、超链接、图片
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- 给TextView加上多彩效果:改变部分字体的大小和颜色
- FCKEditor fckconfig.js配置,添加字体和大小 附:中文字体乱码问题解决
- 点击LinearLayout使用selector改变TextView字体颜色
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- Android TextView 一些字体颜色、大小设置属性
- SpannableString 动态设置textView中字体颜色和大小
- JS为选中内容添加颜色,字体,大小等等
- 使用selector修改TextView中字体的颜色
- JS 切换图片 (简单模式) 字体颜色,大小变化
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- ValuesResTest--使用字符串、字体大小、颜色资源
- JS控制字体大小中、设为首页、收藏本站功能、超链接去掉颜色
- android在TextView中设置超链接,字体大小,字体颜色,图片
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- android 通过一Textview设置不同大小的字体颜色