Generate image from DOM elements

Question

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."

Answer 1

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. https://developer.mozilla.org/en/CSS/-moz-element

Similar hacks can be done in webkit by abusing -webkit-box-reflect .

Answer 2

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, ie will let you take a screenshot of the page.

Answer 3

What about using a separate screen capture program like MWSnap?