一尘不染

将HTML渲染到图像

javascript

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


阅读 347

收藏
2020-04-25

共1个答案

一尘不染

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

  • 给定一个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)。
2020-04-25