如何自动将文本动态添加到图像并导出？

Question

最近，Spotify发布了他们的2019 Spotify打包Web应用程序，从本质上来说，这是音乐艺术家和音乐听众都可以回顾和回顾他们过去一年/听过他们音乐的一种方式。

作为网站的一部分，他们动态创建了这些图像，人们可以将其导出或共享到其社交媒体网络之一。

上面是这些动态生成的图像之一的示例（当然，该图像以及下面的文本/统计信息也会发生变化）。

我将如何在代码中执行此操作？

很抱歉，如果输入的位置不正确-不确定我会在哪里发布。预先感谢！

Answer 1

最简单的方法是使用SVG作为基本模板，从而允许您在事实之后添加文本值。

将SVG添加到画布，然后可以使用.toDataURL("image/jpeg")

将其转换为jpeg。