How to take a screenshot of a web page by using Javascript

Question

I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.

Do any of you have an idea how to accomplish this either by using javascript/java/flash? Any option will do as long as it works...

PS I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.

Thanks a lot!

Answer 1

Currently possible alternatives:

rasterizeHTML.js:

this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo: http://cburgmer.github.io/rasterizeHTML.js/

Lively 3D:

On the tool's website you can find a demo as well and it is still supported and developed.

http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html

HTML2Canvas:

Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.

https://html2canvas.hertzen.com

Old-Answer: I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.

Answer 2

In the end, I ended up using server side generation of screenshots with phantomjs . Found it the most reliable in my scenario and it takes pretty decent screenshots.