JavaScript – 实时生成图片实现

最近写了一个获取Minecraft服务器状态的贴图系统。因为这里面可能有些麻烦,因此在这里讲一下这个是如何实现的。(其实是为了水文章233

这种方法已经应用于TZG MCStatus的贴图生成功能。

需求

根据参数获取服务器状态信息,然后根据信息生成图片进行return.

实现方法:NodeJS + JavaScript

这里主要是写如何实现生成图片的,因此获取状态这里就不讲了。

实现

这里我选择了GraphicsMagick。它在NodeJS很容易就可以调用,编写起来也很方便。

首先,我们引入GM.这里还需要用npm安装相应的模块。

var gm = require('gm')

当我们将所有的内容全部获取完毕后,就可以进行生成了。

首先我们需要一张图片,基于这张图片来进行生成。比如:

这张图是我当时用Sketch自己做的hhh,很难看(

之后,我们还需要一个字体,以便完成中文的输出。如果要生成的内容不涉及中文,应该就不需要了。但为了保险起见,这里我选择使用阿里巴巴普惠体。

那么目前我们的代码是这样的:

gm('./images/tietu.png') /* 图片的位置 */
    .font('./fonts/Alibaba-PuHuiTi.ttf')/* 字体的位置 */

之后我们就需要对位置了…这里是我一个一个对的,也可以使用PhotoShop获取坐标进行合成。

.draw('text  92, 143 '+ something)

最后我们就可以使用.write进行存储了。

为了实现最终的需求,我们还需要将生成的图片进行一个return操作。

res.set('Content-Type', 'image/png');
res.sendFile( __dirname + "/" + "images/result.png");

之后,我们就可以直接看到我们的图片了。

这里是我自己的项目制作完成实现的效果,具体的请自行发挥:)

由于此项目不开源,因此只能在这里随便的说一下了…

留下评论

电子邮件地址不会被公开。 必填项已用*标注