简体繁体 English

从 DOM 元素生成图像

[英]Generate image from DOM elements

原文 2011-05-28 15:47:39 2 3 javascript/ html/ image-generation

Is it possible to generate an image from dom elements (span, div, image, etc.)?是否可以从 dom 元素（span、div、图像等）生成图像？ 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.在这种情况下，我不能使用 canvas，它不必跨浏览器兼容，只要它在某些浏览器中工作即可。 :-) :-)

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." “是的，没错。只是一个小预览，这样他们就可以看到他们正在打开的图表，并且预览也将在其他小地方使用。”

3 个解决方案

If you want to duplicate it to some other location, you can use -moz-element , an experimental non-standard feature in Firefox which will let you take any piece of the DOM, and use it as for example a background image.如果您想将其复制到其他位置，您可以使用-moz-element ，这是 Firefox 中的一个实验性非标准功能，它可以让您获取 DOM 的任何部分，并将其用作例如背景图像。 https://developer.mozilla.org/en/CSS/-moz-element https://developer.mozilla.org/en/CSS/-moz-element

Similar hacks can be done in webkit by abusing -webkit-box-reflect .通过滥用-webkit-box-reflect可以在 webkit 中完成类似的黑客攻击。

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. =) 这是可能的，因为有基于 Web 的错误跟踪解决方案允许您截取屏幕截图。 For example, this random one I found by googling website bug report screenshot seems to use a browser extension to perform the magic.例如，我通过谷歌搜索website bug report screenshot发现的这个随机的似乎使用浏览器扩展来执行魔术。
You may also, possibly, be able to to perform this magic with Flash.您还可以使用 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;或者，如果它不会产生重大开销，您可以使用<div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div> ，但是如果单个图像具有非常非常非常多的元素，这将显着减慢您实现的任何类型的“预览页面”的呈现速度，除非您将 html 插入到页面中- 一次超过几秒钟； 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, ie will let you take a screenshot of the page.然而，最便携的方法是使用服务器端 Web 渲染引擎（最好是沙盒），该引擎旨在以编程方式访问，即让您截取页面的屏幕截图。

What about using a separate screen capture program like MWSnap?使用像 MWSnap 这样的单独屏幕捕获程序怎么样？