从DOM元素生成图像

Question

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

谢谢！

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

Answer 1

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

是的，确切地说。只需一点预览，这样他们就可以看到他们正在打开的图表，预览也将在其他小地方使用。 - OP

客户端：

• 你在寻找非常有趣的东西。 =）有可能，因为有基于网络的错误跟踪解决方案，允许人们截取屏幕截图。例如，我通过谷歌搜索this找到的website bug report screenshot随机一个似乎使用浏览器扩展来执行魔术。
• 您也可能能够使用Flash执行此魔术。
• 或者，如果它不会产生很大的开销，你可以通过使用<div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div>即时生成“图像”，但是如果单个图像的元素非常非常大，那么这将显着减慢向下渲染你实现的任何类型的“预览页面”，除非你在几秒钟内一次一个地将html插入到页面中;该页面可能仍然有点滞后。

服务器端：

• 然而，最便携的方法是使用服务器端的Web渲染引擎（最好是沙盒），它可以通过编程方式访问，即可以截取页面。

Answer 2

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

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

Answer 3

如何使用像MWSnap这样的独立屏幕捕获程序？