将HTML渲染到图像

  • Z时代
  • 2024-01-10
  • 分类：问答

有没有一种方法可以将html渲染为PNG图片？我知道画布是可能的，但我想呈现例如div之类的标准html元素。

回答：

我知道这是一个很老的问题，已经有了很多答案，但是我仍然花了几个小时来尝试做自己想做的事情：

  • 给定一个html文件，从命令行生成具有 背景的（png）图像

使用无头的Chrome（此响应的版本为74.0.3729.157），实际上很容易：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

命令说明：

  • 您可以从命令行运行Chrome（对于Mac，此处显示，但在Windows或Linux上则类似）

  • --headless 在不打开Chrome的情况下运行Chrome，并在命令完成后退出

  • --screenshot将捕获屏幕截图（请注意，它会screenshot.png在运行命令的文件夹中生成一个名为的文件）

  • --window-size只允许捕获屏幕的一部分（格式为--window-size=width,height）

  • --default-background-color=0是告诉Chrome使用 背景而非默认白色的魔术

  • 最后，您提供html文件（作为本地或远程URL）。

以上是 将HTML渲染到图像 的全部内容， 来源链接： utcz.com/qa/401806.html

回到顶部