从 DOM 元素生成图像答案

【问题标题】：Generate image from DOM elements从 DOM 元素生成图像
【发布时间】：2011-05-28 15:47:39
【问题描述】：

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

谢谢！

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

【问题讨论】：

在浏览器中生成图像？不，没有画布。
克隆或图片中的“图像”？
您的意思是使用 DOM 元素作为像素吗？喜欢 ASCII 艺术中的字符？
@Levi，创建 dom 元素的图形（png、jpg 等）表示。 @Jerone，就像克隆一样。我想要这个，因为我正在制作一个在线图表类型的应用程序，这样就可以预览他们的图表，而无需完全加载它。
@Leticia “我正在制作一个在线图表类型的应用程序，这样就可以预览他们的图表，而无需完全加载它。” - 他们图表的状态是存储在客户端还是服务器端？图表是如何实际制作的（非预览版），使用服务器端库（如果是这样的话？），或者以某种方式在客户端制作？

【解决方案1】：

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

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

【讨论】：

是的，有没有办法把它变成可以上传到服务器的图像？不过，这真是个好主意。
@Leticia 您的图表将如何实际制作；例如，它是以某种语言绘制形状的服务器端脚本，还是以某种方式绘制形状的客户端脚本？你决定了吗？为什么服务器需要图像？为什么服务器不能只存储制作图像的代码？
图表是在浏览器中通过添加和操作dom元素制作的。一个 json 字符串由它们组成，例如指定一个红色的 50x50 正方形在 23,328 处旋转 81 度。这是存储在服务器上的。然后当客户端再次加载它时，它只是从 json 中添加 dom 元素。
@Leticia 所以我认为客户端已经可以很好地显示这些元素，但是您希望服务器能够，例如预览？
是的，没错。只是一个小预览，这样他们就可以看到他们正在打开什么图表，并且预览也将在其他小地方使用。

【解决方案2】：

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

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

客户端：

你要求的是非常……有趣的东西。 =) 这是可能的，因为有基于网络的错误跟踪解决方案允许截屏。例如，this我通过谷歌搜索website bug report screenshot发现的随机一个似乎使用浏览器扩展来执行魔术。
您还可以使用 Flash 来发挥这种魔力。
或者，如果它不会产生重大开销，您可以使用 <div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div> 即时生成“图像”，但如果单个图像具有非常非常非常多的元素，这将显着减慢您实现的任何类型的“预览页面”的呈现速度，除非您在几秒钟内将 html 一次插入页面；页面可能仍然有点滞后。

服务器端：

【讨论】：

谢谢@ninjagecko！很好的答案。我可能不得不使用某种服务器端渲染引擎。感谢您的帮助
你能详细说明你将如何在服务器端对这样的东西进行沙盒处理
@AmitWadhwa：我只是想找到一个具有安全设计的可编写脚本的 HTML 测试/渲染引擎，并应用良好的额外安全深度实践，例如限制执行用户，或者（尽管可能太资源-密集型）在虚拟机或其他物理机等中运行。
@ninjagecko：谢谢.. 有道理

【解决方案3】：

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

【讨论】：