Skip to content

怎么使用 js 动态生成海报?

Posted on:2024年7月20日 at 17:40

比如将当前页面生成一张海报,要求携带当前用户的登录信息。


方案一:DOM->canvas->image

将目标 DOM 节点绘制到 canvas 画布,然后利用 canvas 相关的 API 以图片形式导出。

可简单标记为绘制阶段和导出阶段两个步骤:

方案二:DOM->svg->canvas->image

将 html 作为 svg 的外联元素,利用 svg 的 API 导出为图片

方案三:使用NodeJS 调用浏览器方法

在后端生成海报,比如可以使用nodeJS,通过 puppter 等库,调用浏览器的 page 对象,基于 page.screenshots 截图并保存到磁盘。

原文转自:https://fe.ecool.fun/topic/495d46ca-f2ed-4b5c-a34a-1fa80709f0f5