Geek Answers Handbook

Generate image from DOM elements

Is it possible to create an image from dom elements (span, div, image, etc.)? I can’t use the canvas in this case, and it should not be compatible with multiple browsers if it works in some browser .:-)

Thanks!

community edit:. So, I understand that the client can already display these elements just fine, but do you want the server to, for example, display a preview image around the site? "" Yes exactly. Just a small preview so they can see which chart they are opening, and the preview will also be used in other small places. "

+7
source share
3 answers

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

Yup, for sure. Just a little preview so they can see which chart they open, and the preview will also be used in other small places. - OP

on the client side:

  • You are asking for something very ... interesting. =) This is possible because there are web-based error tracking solutions that allow you to take a screenshot. For example, this random one, which I discovered with a googling website bug report screenshot , seems to be using a browser extension to do magic.

  • You may also be able to do this magic with Flash.

  • Otherwise, if this does not involve significant overhead, you can simply generate “images” on the fly using <div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div> , but if one image has a very very very large number of elements, this will significantly slow down the rendering of any type of "preview page" that you have embedded, unless you have inserted the html on the page one by one for several seconds; the page may still lag a little.

server side:

  • The most portable way to do this, however, is to use the server-side web rendering engine (preferably isolated), which is designed for programmatic access, that is, it allows you to take a screenshot of the page.
+2
source

If you want to duplicate it elsewhere, you can use -moz-element , an experimental non-standard function in Firefox that allows you to take any part of the DOM and use it, such as a background image. https://developer.mozilla.org/en/CSS/-moz-element

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

+3
source

How to use a separate screen capture program like MWSnap?

0
source

More articles:


All Articles