如何将所有 html（包括 svg 和底层 css/js）转换为 png 或图像浏览器端答案

【问题标题】：how to convert all html (including svg and underlying css/js) to png or image browser side如何将所有 html（包括 svg 和底层 css/js）转换为 png 或图像浏览器端
【发布时间】：2014-04-02 18:57:23
【问题描述】：

是否有一个一站式库可以按原样提取我的 html/css（发布 js 操作）并将其转换为图像，例如 png？我的复杂之处在于页面的 js 可以在加载后呈现 svg 或任何类型的样式 - 我不知道。

我知道在服务器端有一些方法，但我真的很想在客户端实现它。

我也知道有canvg 可以转换svg，但我事先不知道我的页面会有什么——canvas、svg，几乎可以有任何东西。所以我需要一个相当强大的工具。

有什么想法吗？ html2canvas 对我不起作用；它省略了对 css 的 svg 和 js 操作。

谢谢。

【问题讨论】：

你应该看看stackoverflow.com/questions/923885/…

标签： javascript html css svg canvg

【解决方案1】：

如果您想使用网站的图片，您可以使用 iframe，就像 <iframe src="page.html" width="300" height="300">What should be display if the iFrame isn´t</iframe> iFrame 在一个小窗口中包含原始网站（例如 page.html）（在本例中为 300 像素 x 300 像素）在其他网站上。

【讨论】：

对不起 - 我想让用户下载页面的图片，这样 iframe 就不能工作了。
我花了几个小时尝试将 js 添加到这个 network graph 中，这会将 svg 变成画布并包含 css。我想这都是关于将css附加到'defs'。无法做到，所以我不知道 canvg 是否是一个可行的选择。

【解决方案2】：

或者您可以使用 http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx 获取 svg。

【讨论】：

可以给我你的html代码吗？我测试了这个网站，它运行良好。

【解决方案3】：

据我所知，没有插件可以做任何事情。我通过结合 HTML2Canvas 和 Canvg 完成了一个类似的问题，基本上你将使用 HTML2Canvas 进行传递，然后将 Canvg 绘图分层到由 HTML2Canvas 创建的画布上。

显然定位很关键，因此您可能必须循环遍历元素才能正确定位它们。

【讨论】：

已经尝试过canvg，但它似乎没有引入css（如字体等）
那不是你用的，canvg 是 SVG 的
是的，canvg 适用于 SVG，但它不处理其 defs 元素之外的样式。将 svg 样式放入 css 是一个非常常见的过程，因此令人惊讶的是 canvg 无法处理该常见用例。我猜唯一的方法是让我遍历 css。