什么是promise？怎么将GraphicsMagick改为同步？

GraphicsMagick
什么是promise？

GraphicsMagick

近期有这样一个需求，用户参加活动，连续21天打卡，完成活动后会给用户发一个证书。证书是一张图片，而图片上包含文字，且文字为动态生成的，最终效果类似下图：

alt

一、安装方式

首先附上GraphicsMagick软件的下载地址：

windows版本下载地址

linux版本下载地址

以上软件主要用作系统环境配置。此环境必须配置，同时还要在开发中下载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。

初始化项目后，在根目录放置下图 alt

和相应字体(链接：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, '这是一个测试')

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