如何在Node.js中将超文本标记语言转换为图像

Question

我需要在Node服务器上将HTML模板转换为图像。服务器将以字符串的形式接收HTML。我尝试过PhantomJS (使用一个名为Webshot的库)，但它在flex box和现代CSS上不能很好地工作。我尝试使用Chrome headless-browser，但它似乎没有解析html的API，只有URL。

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

有没有办法在模板模式下使用无头Chrome而不是URL模式？我是说，而不是像这样

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写在文件上，然后使用file URI (即：file:///home/user/path/to/your/file.html)访问，它应该可以和chrome headless-browser和Nightmare (屏幕截图功能)很好地协同工作。另一种选择是设置一个简单的HTTP服务器并访问url。