输入文字自动生成图片_node 文字生成图片

背景

不知不觉，公众号【前端名狮】已经做了三个月时间了，期间共更新了22篇解析经典面试题的文章，60篇精选文章，真的是困苦和收获共存的三个月。

公众号发布文章时，需要为文章配置一个封面图片。我的常规做法就是网上搜一张图片，然后利用 PhotoShop，在图片上加入文章标题，然后导出生成图片，如下图所示：

上图实际就是在一张背景图中，加入了一行文字。操作步骤简单，但是每次都需要打开PhotoShop修改文字，感觉麻烦、工作重复。

能不能用代码，解决日常生活中遇到的重复性工作呢？

实现方案

整体思路：

文字和图形不能直接合并，需要将文字先转换成图形，然后再将图形进行合并，大致步骤如下：

1. 利用text-to-svg，将文字转成SVG图形；

2. 利用sharp，将SVG图形与背景图片合并；

分析实现：

1. 将文字转为SVG图形

将文字转换为SVG图形，需要借助Node的模块text-to-png，该模块能够将文字按照指定字体生成SVG图形。

SVG 意为可缩放矢量图形(Scalable Vector Graphics)，放缩时不损失图形质量，SVG 是使用 XML 格式定义的图像，如下所示：

在html页面中嵌入了一个SVG表示三角形

html>
<html&g