从 DOM 元素生成图像

Question

是否可以从 dom 元素（span、div、图像等）生成图像？ 在这种情况下，我不能使用 canvas，它不必跨浏览器兼容，只要它在某些浏览器中工作即可。 :-)

谢谢！

社区编辑： “所以我认为客户端已经可以很好地显示这些元素，但是您希望服务器能够，例如在站点周围显示预览图像？” “是的，没错。只是一个小预览，这样他们就可以看到他们正在打开的图表，并且预览也将在其他小地方使用。”

Answer 1

如果您想将其复制到其他位置，您可以使用-moz-element ，这是 Firefox 中的一个实验性非标准功能，它可以让您获取 DOM 的任何部分，并将其用作例如背景图像。 https://developer.mozilla.org/en/CSS/-moz-element

通过滥用-webkit-box-reflect可以在 webkit 中完成类似的黑客攻击。

Answer 2

所以我认为客户端已经可以很好地显示这些元素，但是您希望服务器能够，例如预览？

是的，正是。 只是一个小预览，这样他们就可以看到他们正在打开的图表，并且预览也将在其他小地方使用。 – 欧普

客户端：

• 你在要求一些非常……有趣的东西。 =) 这是可能的，因为有基于 Web 的错误跟踪解决方案允许您截取屏幕截图。 例如，我通过谷歌搜索website bug report screenshot发现的这个随机的似乎使用浏览器扩展来执行魔术。

• 您还可以使用 Flash 来执行此魔术。

• 或者，如果它不会产生重大开销，您可以使用<div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div> ，但是如果单个图像具有非常非常非常多的元素，这将显着减慢您实现的任何类型的“预览页面”的呈现速度，除非您将 html 插入到页面中- 一次超过几秒钟； 该页面可能仍然有点滞后。

服务器端：

• 然而，最便携的方法是使用服务器端 Web 渲染引擎（最好是沙盒），该引擎旨在以编程方式访问，即让您截取页面的屏幕截图。

Answer 3

使用像 MWSnap 这样的单独屏幕捕获程序怎么样？