如何将React组件转换为图像？

Question

我想将 React 组件（可能包含其他组件作为子组件）转换为图像。基本上，我想创建特定 HTML 部分的图像视图。我该怎么做？ ReactJS 或 Javascript 中的任何库都可以工作。

Answer 1

我使用后端的

node-html-to-image

模块解决了这个问题，该模块使用

puppeteer

。基本上，puppeteer 生成一个虚拟浏览器，在其中加载组件并捕获图像。

您需要将 html 代码传递到后端并生成图像。

Answer 2

您可以使用这个包https://github.com/hcorta/react-to-image它完全位于前端。它的工作原理是使用 HTML5 画布和 SVG 从 DOM 节点生成图像。

Answer 3

是的，您可以使用以下库将您的 React 组件转换为图像。 “html2canvas”

npm 安装 html2canvas

Answer 4

正如 Prince 所评论的，更新的库是：www.npmjs.com/package/@hugocxl/react-to-image