将 HTML 片段光栅化为 PNG答案

【问题标题】：Rasterize a fragment of HTML to PNG将 HTML 片段光栅化为 PNG
【发布时间】：2011-06-30 17:05:27
【问题描述】：

我有一个包含一系列 div 的页面。每个 div 代表幻灯片中的一张幻灯片。我需要一系列缩略图，每张幻灯片一个。理想情况下，这些缩略图将是幻灯片的光栅化版本：PNG data: url 将是完美的。我希望在浏览器中完成工作，并且我可以接受只能在其中一种现代浏览器（例如 chrome 或 firefox）中工作的东西。我怀疑这是不可能的，但很想听听其他的。

canvas 对象上的方法toDataURL() 本质上是我想要的，但是有问题的 div 不是canvas 的实例，所以这不起作用。

【问题讨论】：

标签： html css png render

【解决方案1】：

这在客户端是不可能的，因为这是为了防止潜在的欺诈行为，例如 ie 脚本，该脚本会使用一些私人数据截取您的页面并将其发送给天知道的地方。

虽然……

可以复制整个 HTML 以将其用作缩略图预览/任何内容，并使用 CSS3 转换（缩放）+ 在其上添加覆盖以防止交互/文本选择等以模仿 div 的缩略图。
firefox/chrome 扩展中有一个选项可以将页面保存到图像 - 虽然不确定是否可以仅将页面的一部分作为图像
或者您可以像 google 一样在其搜索结果页面上进行页面预览（单击结果标题附近的放大镜） - 让机器人机器进入页面并截取要生成的任何内容使用此数据的页面预览 - 不知道您想要这样做多少，但如果您想要它那么糟糕......:)

恐怕没有简单的方法可以做你想做的事，而 CSS3 技巧似乎是最容易使用的方法。

【讨论】：

谢谢，这是很好的信息。可悲的是，css3 缩放弄乱了 jqueryui 可拖动插件，这首先是缩略图的想法。由于幻灯片上的元素是绝对定位的，因此尝试在不缩放的情况下进行操作会变得非常难看。它需要实时发生，即使浏览器处于离线模式，所以服务器端将无法工作。我不能让用户安装任何扩展，所以这也行不通。我想我会考虑修复可拖动 + 缩放错误。
顺便说一句，这个（未回答的）问题涉及如何使用缩小的 html 元素来做我需要的事情：stackoverflow.com/questions/4987050/…

【解决方案2】：

一种解决方案是通过将 HTML 作为 <foreignObject> 嵌入到 SVG 图像中，然后通过 ctx.drawImage() 绘制结果图像，将 HTML 渲染到画布。

阅读article on MDN here，或查看rasterizeHTML.js，这是上述方法的实现。

限制是您的内容都应该是同源干净的（即可以通过 AJAX 访问）。

免责声明：我是 rasterizeHTML.js 的作者。

【讨论】：

【解决方案3】：

您可以使用 rasterizeHTML 库将 html 光栅化为 javascript 中的 <canvas> 元素： http://cburgmer.github.io/rasterizeHTML.js/

【讨论】：

欢迎来到 StackOverflow。当您回答问题时，请确保添加一些新信息。看来你的解决方案和cburgmer已经一样了provided here