如何将 HTML 呈现为图像？

在某些场景下，我们需要将 HTML 页面转换为图像格式，比如生成网页截图、生成 PDF、邮件中插入 HTML 图片等。下面介绍几种将 HTML 呈现为图像的方法。

1. 使用浏览器截图工具

现代浏览器都提供了截图工具，可以通过代码调用浏览器进行截图操作。比如使用无头浏览器 Puppeteer：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 800, height: 600 });
  await page.goto('https://www.baidu.com');
  await page.screenshot({ path: 'baidu.png' });
  await browser.close();
})();

这段代码会打开一个页面，然后进行截图操作并保存为 baidu.png 文件。

这种方法优点是可以保留整个页面的样式，缺点是截图速度比较慢，且容易受到网络环境和浏览器限制。

2. 使用静态网页生成工具

静态网页生成工具可以将 HTML 页面转换为静态网页，再将静态网页转换为图像文件。比如使用 wkhtmltopdf：

wkhtmltoimage --width 800 --height 600 https://www.baidu.com baidu.png

这个命令会打开一个浏览器内核，将页面渲染为静态网页并保存为 baidu.png 文件。

这种方法优点是生成速度比较快，且可以支持多种格式输出，缺点是样式或字体容易出现差异。

3. 使用在线截图工具

在线截图工具可以将 HTML 页面提交到服务器进行截图操作，并返回截图结果。比如使用 PageScreenshot：

https://www.pagescreenshot.info/api/?url=https%3A%2F%2Fwww.baidu.com&full_page=true&output=json&img_width=800&img_height=600&api_key=YOUR_API_KEY

这个 URL 会将百度首页提交到服务器进行截图操作，并返回 JSON 格式的截图结果。

这种方法优点是可以快速获取截图结果，缺点是生成速度受到服务器性能和网络环境限制。

总结

将 HTML 呈现为图像有多种方法可选，我们可以根据场景需求和实际情况选择合适的方法进行处理。