将HTML的一个片段转化为PNG图像

Question

我有一个页面，其中包含一系列div。每个div代表幻灯片中的一个幻灯片。我需要一系列缩略图，每个幻灯片都需要一个缩略图。理想情况下，这些缩略图将是幻灯片的光栅化版本：PNG data: url是完美的。我希望在浏览器中完成这项工作，并且可以接受仅适用于现代浏览器（例如Chrome或Firefox）的解决方案。我怀疑这是不可能的，但很想听听其他方面的建议。

canvas对象上的toDataURL()方法基本上就是我想要的，但是相关的div不是canvas的实例，所以无法使用它。

- Benson

Answer 1

一种解决方法是将HTML嵌入到SVG图像中作为<foreignObject>，然后通过ctx.drawImage()绘制生成的图像到画布上。

可以阅读MDN上的文章，或查看rasterizeHTML.js的实现。

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

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

- cburgmer

---

两个链接都失效了，但是这是 GitHub 仓库的链接：https://cburgmer.github.io/rasterizeHTML.js/ - Anthony Johnston

两个链接都失效了，但是这是 GitHub 代码库的链接：https://cburgmer.github.io/rasterizeHTML.js/ - undefined

Answer 2

客户端不可能实现此功能，因为这是被禁止的，以保护免受潜在欺诈行为的侵害，例如ie脚本可以截取您页面上的一些私人数据并将其发送到某个地方。虽然...

- 可以复制整个HTML以将其用作缩略图预览/其他内容，并使用CSS3转换（缩放）+添加覆盖层来防止交互/文本选择等，以模拟div的缩略图。 - 火狐/谷歌扩展中有选项可以将页面保存为图像，但不确定能否将页面的部分作为图像进行保存。 - 或者您可以像Google在其搜索结果页面上做的那样（单击结果标题旁边的放大镜），使用机器人机器进入页面并截取任何内容的屏幕截图，以使用此数据生成页面预览 - 不知道您是否非常想这样做...

很遗憾，没有容易的方法实现您想要的功能，而CSS3技巧似乎是最容易实现的。

- Tom Tu

---

谢谢，这是一个很好的信息。可悲的是，CSS3缩放会破坏jQueryUI可拖动插件，而这也是缩略图想法的重点。由于幻灯片上的元素是绝对定位的，试图在没有缩放的情况下进行操作会变得非常丑陋。它需要实时发生，即使在浏览器处于离线模式时，所以服务器端不起作用。我不能让用户安装任何扩展，所以那也行不通。我想我会研究一下如何修复可拖拽+缩放错误。 - Benson

顺便说一下，这个（未回答的）问题涉及如何使用缩小的HTML元素来实现我需要的功能：https://dev59.com/zFTTa4cB1Zd3GeqPrEo4 - Benson

Answer 3

你可以使用rasterizeHTML库在JavaScript中将HTML转换成<canvas>元素: http://cburgmer.github.io/rasterizeHTML.js/

- naldir

---

欢迎来到StackOverflow。当你回答问题时，请确保添加一些新信息。看起来你的解决方案与cburgmer已经在这里提供了相同的答案(https://dev59.com/gFTTa4cB1Zd3GeqPs3-F#12464988)。 - Luís Cruz