How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)

javascript screenshot capture google-search
Paweł Szymański picture Paweł Szymański · Apr 11, 2011 · Viewed 312.5k times · Source

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:

  1. BrowserShots alike services...
  2. Mechanized browsers...
  3. wkhtmltoimage...
  4. Python WebKit2PNG...

But none of those gives me all I need, which is:

  1. Processing at browser side (generate screenshot of page). Don't need to be saved on HDD! Just...
  2. ...send image to Server for further processing.
  3. 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)

Feedback/report bug example

Answer

Vaibhav Garg picture Vaibhav Garg · Aug 2, 2011

"Using HTML5/Canvas/JavaScript to take screenshots" answers your problem.

You can use JavaScript/Canvas to do the job but it is still experimental.

Related questions

Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are …

Read More
How to save the contents of a div as a image?

Basically, I am doing what the heading states, attempting to save the contents of a div as an image. I plan on making a small online application for the iPad. One function that is a must is having a 'Save' …

Read More
create screenshot of webpage using html2canvas (unable to initialize properly)

I am attempting to use http://html2canvas.hertzen.com/ to take screenshots of my webpage. I am unable to initialize a canvas element using... var canvas = $('body').html2canvas(); If I were able to get a proper canvas I …

Read More