14

我需要在 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');

但是这个选项听起来有点尴尬。还有其他更直接的解决方案吗？

4

2 回答 2

21

您可以使用名为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 的屏幕截图保存在根目录中。

于 2019-07-26T10:37:49.070 回答
7

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

于 2017-06-26T21:41:54.463 回答