从DOM元素生成图像 [英] Generate image from DOM elements

问题描述

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

感谢！

社群编辑：客户端可以很好地显示这些元素，但是您希望服务器能够在网站上显示预览图像？ 是的，只是一个小小的预览，所以他们可以看到他们打开的图表，预览也会在其他小地方使用。

解决方案

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

客户端：

• 你在问一些非常有趣的事情。 =）它是可能的，因为有基于Web的错误跟踪解决方案，允许用户截取屏幕截图。例如， 此 随机的一个，我通过使用Google搜索网站bug报告截图似乎使用浏览器扩展来执行魔术。




• ，能够用Flash执行这个魔术。




• 或者，如果它不会产生大的开销，那么您可以在其上生成图像通过使用< div style =overflow：hidden; position：relative;> （在这里插入你所有的dom元素）< / div> ，但是如果单个图像的元素数量非常非常大，这会显着减慢任何类型的预览页面你实现了，除非你在几秒内一次一个地插入html页面;虽然页面可能仍然有点滞后。

服务器端：

• 然而，最便捷的方法是使用服务器端Web渲染引擎（最好是沙盒），它被设计为可通过编程访问，即可让您截取页面的截图。

Is it possible to generate an image from dom elements (span, div, image, etc.)? I can't use canvas in this case, and it doesn't have to be cross-browser compatible, as long as it works in some browser. :-)

Thanks!

community edit: "So I take it that the client can already display these elements just fine, but you want the server to be able to, for example display a preview image around the site?" "Yup, exactly. Just a little preview so they can see what diagram they're opening, and the preview will also be used in other little places, too."

解决方案

So I take it that the client can already display these elements just fine, but you want the server to be able to, for example have a preview?

Yup, exactly. Just a little preview so they can see what diagram they're opening, and the preview will also be used in other little places, too. – OP

client-side:

• You are asking for something very... interesting. =) It is possible, because there are web-based bug-tracking solutions which allow one to take a screenshot. For example, this random one I found by googling website bug report screenshot seems to use a browser extension to perform the magic.

• You may also, possibly, be able to to perform this magic with Flash.

• Alternatively, if it wouldn't incur a major overhead, you could just generate the "images" on-the-fly by using a <div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div>, but if a single image had a very very very very large number of elements, this would significantly slow down rendering of any type of "preview page" you implemented, unless you inserted the html into the page one-at-a-time over a few seconds; the page might still lag a bit though.

server-side:

• The most portable way to do this, however, would be to use a server-side web-rendering engine (preferably sandboxed) which is designed to be programmatically accessible, i.e. will let you take a screenshot of the page.

这篇关于从DOM元素生成图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！