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

ninjagecko
  • 88,546
  • 24
  • 137
  • 145
Leticia Meyer
  • 73
  • 1
  • 3
  • Generate an image *in* the browser? No, not without canvas. – Jared Farrish May 28 '11 at 15:51
  • An 'image' as in clone or as in picture? – jerone May 28 '11 at 15:54
  • Do you mean using DOM elements as pixels? Like characters in ASCII art? – Karl Andrew May 28 '11 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. – Leticia Meyer May 28 '11 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? – ninjagecko May 28 '11 at 16:12

3 Answers3

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.

ninjagecko
  • 88,546
  • 24
  • 137
  • 145
  • 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 Meyer May 28 '11 at 16:12
  • @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? – ninjagecko May 28 '11 at 16:14
  • 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 Meyer May 28 '11 at 16:18
  • @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? – ninjagecko May 28 '11 at 16:21
  • 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. – Leticia Meyer May 28 '11 at 16:25
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.
Community
  • 1
  • 1
ninjagecko
  • 88,546
  • 24
  • 137
  • 145
  • 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 – Leticia Meyer May 28 '11 at 22:00
  • Can you elaborate on how you would go about sandboxing such a thing on server side – Amit Wadhwa Aug 13 '13 at 16:39
  • 1
    @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. – ninjagecko Aug 13 '13 at 19:49
0

What about using a separate screen capture program like MWSnap?

James Alarie
  • 1