将 HTML 渲染为图像 [英] Render HTML to an image
本文介绍了将 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(基于 chrome)
- EvoPDF(有 html 选项)
- Grabzit
- HTML/CSS 到图像 API
- ...
- ApiFlash (based on chrome)
- EvoPDF (has an option for html)
- Grabzit
- HTML/CSS to Image API
- ...
优点
- 执行Javascript
- 近乎完美的渲染
- 正确使用缓存选项时速度快
- 规模由 API 处理
- 精确计时、视口、...
- 大多数时候他们提供免费计划
缺点
- 如果您打算经常使用它们,则不是免费的
- dom-to-image
- wkhtmltoimage(包含在 wkhtmltopdf 工具中)
- IMGKit(适用于 ruby,基于 wkhtmltoimage)
- imgkit(适用于python,基于wkhtmltoimage)
- python-webkit2png
- ...
- 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(PhantomJs 的 JavaScript 包装库)
- ...
- PhantomJs
- node-webshot (javascript wrapper library for PhantomJs)
- ...
优点
- 执行Javascript
- 相当快
缺点
- 糟糕的渲染
- 不支持最近的网络功能(FlexBox、高级选择器、Webfonts、框大小、媒体查询等)
- 规模复杂
- 如果有要加载的图像,那么让它工作不是那么容易......
- Chrome Headless
- chrome-devtools-protocol
- Puppeteer(Chrome 无头的 JavaScript 包装库)
- ...
- Chrome Headless
- chrome-devtools-protocol
- Puppeteer (javascript wrapper library for Chrome headless)
- ...
优点
- 执行Javascript
- 近乎完美的渲染
缺点
- 在以下方面获得想要的结果并不容易:
- 页面加载时间
- 视口尺寸
披露:我是 ApiFlash 的创始人.我已尽力提供诚实而有用的答案.
这篇关于将 HTML 渲染为图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文