将 HTML 渲染为图像 [英] Render HTML to an image

查看:38
本文介绍了将 HTML 渲染为图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法将 html 渲染为像 PNG 这样的图像?我知道可以使用画布,但我想呈现标准的 html 元素,例如 div.

Is there a way to render html to image like PNG? I know that it is possible with canvas but I would like to render standard html element like div for example.

推荐答案

有很多选择,它们各有利弊.

There is a lot of options and they all have their pro and cons.

  • ApiFlash (based on chrome)
  • EvoPDF (has an option for html)
  • Grabzit
  • HTML/CSS to Image API
  • ...

优点

  • 执行Javascript
  • 近乎完美的渲染
  • 正确使用缓存选项时速度快
  • 规模由 API 处理
  • 精确计时、视口、...
  • 大多数时候他们提供免费计划

缺点

  • 如果您打算经常使用它们,则不是免费的
  • dom-to-image
  • wkhtmltoimage (included in the wkhtmltopdf tool)
  • IMGKit (for ruby and based on wkhtmltoimage)
  • imgkit (for python and based on wkhtmltoimage)
  • python-webkit2png
  • ...

优点

  • 大多数时候转换速度都很快

缺点

  • 糟糕的渲染
  • 不执行javascript
  • 不支持最近的网络功能(FlexBox、高级选择器、Webfonts、框大小、媒体查询等)
  • 有时不太容易安装
  • 规模复杂
  • PhantomJs
  • node-webshot (javascript wrapper library for PhantomJs)
  • ...

优点

  • 执行Javascript
  • 相当快

缺点

  • 糟糕的渲染
  • 不支持最近的网络功能(FlexBox、高级选择器、Webfonts、框大小、媒体查询等)
  • 规模复杂
  • 如果有要加载的图像,那么让它工作不是那么容易......
  • Chrome Headless
  • chrome-devtools-protocol
  • Puppeteer (javascript wrapper library for Chrome headless)
  • ...

优点

  • 执行Javascript
  • 近乎完美的渲染

缺点

  • 在以下方面获得想要的结果并不容易:
    • 页面加载时间
    • 视口尺寸

    披露:我是 ApiFlash 的创始人.我已尽力提供诚实而有用的答案.

    这篇关于将 HTML 渲染为图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆