Is it possible to capture the rendered HTML page from Javascript.
- I want to be able to create a "minimap" of an HTML page for quick navigation.
-
You're going to be more specific than that. There's probably a way to do what you want, but you're going to have to tell us what you want before we can suggest it...Elliot Bonneville– Elliot Bonneville2012-05-09 12:57:55 +00:00Commented May 9, 2012 at 12:57
-
@ElliotBonneville Grooveek actually managed to answer my question. But I basically want a HTML2image function from jsBent Rasmussen– Bent Rasmussen2012-05-10 17:59:54 +00:00Commented May 10, 2012 at 17:59
Add a comment
|
3 Answers
have a look at html2canvas It does some good things, even if it's not perfect
Comments
You can use:
document.body.innerHTML
That is the whole "rendered" (ie. live/DOM-complete) HTML, but I'm not sure this is what you want.
You would be better defining what it is you want to create a map of, for example headings etc, then you can use getElementsByTagName('h1') (for example) to grab all of the H1's on the page.
If you're talking an actual image as rendered by a browser, you can take a look at wkhtmltopdf and it's wkhtmltoimage counterpart, which will take HTML (or a web address) as an input and convert it either to a text-complete PDF, or a static image. Have used this neat app before on large projects so it's definitely reliable, also uses WebKit so CSS3/JS compatible.
2 Comments
Bent Rasmussen
I want the rendering, i.e. the pixels. Thanks for your answer. :-)
Rudi Visser
@BentRasmussen Ah in that case, wkhtmltoimage is definitely what you should try, if you want it server side of course :)
wkhtmltoimage is only of use for static html pages. If you have user selections or a canvas with some drawing (other than the default when first rendered) wkhtmltoimage will not help.
