GraphicsMagick
近期有这样一个需求,用户参加活动,连续21天打卡,完成活动后会给用户发一个证书。证书是一张图片,而图片上包含文字,且文字为动态生成的,最终效果类似下图:
一、安装方式
首先附上GraphicsMagick软件的下载地址:
以上软件主要用作系统环境配置。此环境必须配置,同时还要在开发中下载gm包进行开发,命令如下:
npm install gm --save
windows版本下载后,直接运行.exe文件即可完成安装。
linux版本下载后,需要如下操作方可完成安装:
1、安装相关依赖:
$ yum install -y gcc libpng libjpeg libpng-devel libjpeg-devel ghostscript libtiff libtiff-devel freetype freetype-devel
2、下载并解压到目录/usr/local/:
wget ftp://ftp.graphicsmagick.org/pub/GraphicsMagick/1.3/GraphicsMagick-1.3.28.tar.gz
tar -zxvf GraphicsMagick-1.3.28.tar.gz -C /usr/local/
3、编译并安装:
cd /usr/local/GraphicsMagick-1.3.28
./configure -prefix=/usr/local/GraphicsMagick-1.3.28 -enable-shared
make
make install
4、配置profile文件:
增加如下命令:
export PATH=$PATH:/usr/local/GraphicsMagick-1.3.28/bin
5、验证:
[root@daguanren ~]# gm
GraphicsMagick 1.3.28 2018-01-20 Q8 http://www.GraphicsMagick.org/
Copyright (C) 2002-2018 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.
Usage: gm command [options ...]
Where commands include:
batch - issue multiple commands in interactive or batch mode
benchmark - benchmark one of the other commands
compare - compare two images
composite - composite images together
conjure - execute a Magick Scripting Language (MSL) XML script
convert - convert an image or sequence of images
help - obtain usage message for named command
identify - describe an image or image sequence
mogrify - transform an image or sequence of images
montage - create a composite image (in a grid) from separate images
time - time one of the other commands
version - obtain release version
二、开发实现
这里使用的是ThinkJS 3.0进行开发,具体安装方式见ThinkJS系列文章第二篇_安装ThinkJS 3.0。
初始化项目后,在根目录放置下图
和相应字体(链接:https://pan.baidu.com/s/1YYNRzNBq1m5HNTUlEXQs_Q 密码:cn0l)
安装依赖包
npm install gm --save
编辑index.js文件如下:
const Base = require('./base.js');
const gm = require('gm');
module.exports = class extends Base {
async indexAction() {
let stream = gm(think.ROOT_PATH+'/girl.jpg')
// .stroke("#d60e26")
// .drawCircle(10, 10, 20, 10)
.fill('#ffffff')
.font(think.ROOT_PATH+"/msyh.ttf", 12)
.fontSize(50)
.drawText(400, 800, "www.daguanren.cc");
let gmWrite = think.promisify(stream.write, stream);
await gmWrite(think.ROOT_PATH+"/drawing.jpg");
return this.success();
}
}
npm start
启动项目后
访问 http://127.0.0.1:8360/index 即可输出目标图片。
三、GraphicsMagick基本用法
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, '这是一个测试')
字体、大小和颜色,有了这些,基本上就可以自由的在图片上绘制了。
什么是promise?
index.js文件有用到promisify的写法,主要是将异步函数转化成同步函数的写法。
const Base = require('./base.js');
const gm = require('gm');
module.exports = class extends Base {
async indexAction() {
let stream = gm(think.ROOT_PATH+'/girl.jpg')
// .stroke("#d60e26")
// .drawCircle(10, 10, 20, 10)
.fill('#ffffff')
.font(think.ROOT_PATH+"/msyh.ttf", 12)
.fontSize(50)
.drawText(400, 800, "www.daguanren.cc");
let gmWrite = think.promisify(stream.write, stream);
await gmWrite(think.ROOT_PATH+"/drawing.jpg");
return this.success();
}
}
参考:
https://www.cnblogs.com/lvdabao/p/es6-promise-1.html https://blog.csdn.net/dreamer2020/article/details/52239499 https://blog.csdn.net/dreamer2020/article/details/51647885 https://thinkjs.org/zh-cn/doc/3.0/async.html https://cnodejs.org/topic/547c17130ae47dec03aa291d http://aheckmann.github.io/gm/docs.html#manipulation https://stackoverflow.com/questions/29578599/graphicsmagick-text-issues https://github.com/aheckmann/gm/issues/320 https://stackoverflow.com/questions/17744288/asynchronous-graphicsmagick-for-node
Comments