从DOM元素生成图像

时间:2011-05-28 15:47:40

标签: javascript html image-generation

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

谢谢!

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

3 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

  

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

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

客户端:

  • 你要求的东西非常有趣。 =)可能,因为有基于网络的错误跟踪解决方案,允许用户截取屏幕截图。例如,我通过Google搜索website bug report screenshot找到的 this 随机点似乎使用浏览器扩展来执行魔术。

  • 您可能也可以通过Flash实现这种魔力。

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

服务器端:

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

答案 2 :(得分:0)

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