7

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

Improve this question
5
  • Generate an image in the browser? No, not without canvas. Commented May 28, 2011 at 15:51
  • An 'image' as in clone or as in picture? Commented May 28, 2011 at 15:54
  • Do you mean using DOM elements as pixels? Like characters in ASCII art? Commented May 28, 2011 at 15:59
  • @Levi, create a graphical (png,jpg,etc.) representation of the dom elements. @Jerone, as in clone. I want this because I'm making an online diagramming-type application, and this way there will be a preview of their diagrams, without having to completely load it. Commented May 28, 2011 at 16:00
  • @Leticia "I'm making an online diagramming-type application, and this way there will be a preview of their diagrams, without having to completely load it." - is the state of their diagrams stored client-side, or server-side? How is the diagram made actually made (non-preview), with server-side libraries (if so how?), or somehow on the client side? Commented May 28, 2011 at 16:12

3 Answers 3

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Yeah, is there a way to turn that into an image that can be uploaded to a server? That's a really sweet idea, though.
@Leticia How will your diagram actually be made; is it for example a server-side script which will draw shapes in some language, or is it a client-side script that will draw shapes somehow? Have you decided yet? Why does the server need the images? Why can't the server just store the code that makes the images?
the diagrams are made in the browser by adding and manipulating dom elements. A json string is made from them, specifying for example a red 50x50 square is at 23,328 rotated 81 degrees. This is stored on the server. Then when the client loads it again, it just adds dom elements from the json.
@Leticia 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.
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, i.e. will let you take a screenshot of the page.
Improve this answer

3 Comments

Thank you @ninjagecko! Very good answer. I'm probably going to have to go with some sort of server-side rendering engine. thanks for your help
Can you elaborate on how you would go about sandboxing such a thing on server side
@AmitWadhwa: I merely meant finding a scriptable HTML testing/rendering engine with a secure design, and applying good extra security-in-depth practices like restricting the executing user, or (though likely too resources-intensive) running in a virtual machine or another physical machine, etc.
0

What about using a separate screen capture program like MWSnap?

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.