如何在 Node.js 中将 HTML 转换为图像

Question

我需要在 Node 服务器上将 HTML 模板转换为图像。服务器将接收作为字符串的 HTML。我尝试了 PhantomJS（使用名为 Webshot 的库），但它不适用于 flex box 和现代 CSS。我尝试使用 Chrome 无头浏览器，但它似乎没有用于解析 html 的 API，只有 URL。

目前将一段 HTML 转换为图像的最佳方法是什么？

有没有办法在模板模式而不是 URL 模式下使用无头 Chrome？我的意思是，而不是做类似的事情

chrome.goTo('http://test.com')

我需要类似的东西：

chrome.evaluate('<div>hello world</div>');

在这篇文章的评论中建议的另一个选项是将模板保存在服务器上的文件中，然后在本地提供它并执行以下操作：

chrome.goTo('http://localhost/saved_template');

但是这个选项听起来有点别扭。有没有其他更直接的解决方案？

Answer 1

您可以使用名为Puppeteer的库。示例代码片段：

 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.setViewport({
     width: 960,
     height: 760,
     deviceScaleFactor: 1,
 });            
 await page.setContent(imgHTML);
 await page.screenshot({path: example.png});
 await browser.close();

这将在根目录中保存 HTML 的屏幕截图。

Answer 2

您可以使用html2canvas在前端轻松完成。在后端，您可以在文件上编写 html 并使用文件 URI（即：）进行访问file:///home/user/path/to/your/file.html，它应该适用于 chrome 无头浏览器和Nightmare（屏幕截图功能）。另一种选择是设置一个简单的 HTTP 服务器并访问 url。