I'm working on web application that needs to render a page and make a screenshot on the client (browser) side.
I don't need the screenshot to be saved on the local HDD though, just kept it in RAM and send it to the application server later.
I researched:
- BrowserShots alike services...
- Mechanized browsers...
- wkhtmltoimage...
- Python WebKit2PNG...
But none of those gives me all I need, which is:
- Processing at browser side (generate screenshot of page). Don't need to be saved on HDD! Just...
- ...send image to Server for further processing.
- Capturing whole page (not only visible part)
Eventually I came upon Google's Feedback Tool (click "feedback" on YouTube footer to see this). It contains JavaScript for JPG encoding and two other huge scripts which I can't determine what exactly they do...
But it's processed on the Client side - otherwise there would be no point putting this huge JPEG encoder in the code!
Anyone have any idea how did they made it / how I can make it?
Here is an example of the feedback (report a bug on some screens)
This question is related to
javascript
screenshot
capture
google-search
The answer is
"Using HTML5/Canvas/JavaScript to take screenshots" answers your problem.
You can use JavaScript/Canvas to do the job but it is still experimental.
I needed to snapshot a div on the page (for a webapp I wrote) that is protected by JWT's and makes very heavy use of Angular.
I had no luck with any of the above methods.
I ended up taking the outerHTML of the div I needed, cleaning it up a little (*) and then sending it to the server where I run wkhtmltopdf against it.
This is working very well for me.
(*) various input devices in my pages didn't render as checked or have their text values when viewed in the pdf... So I run a little bit of jQuery on the html before I send it up for rendering. ex: for text input items -- I copy their .val()'s into 'value' attributes, which then can be seen by wkhtmlpdf
Source: Stackoverflow.com