How to take page screenshots like Google+

I noticed after using Google+'s feedback that it takes a screenshot and also allows you to do things such as highlight and black out sections. I'm wondering how this can be achieved; based on the fact that you can modify the DOM with highlights and black outs I assume it's just taking the entire DOM and turning that into an image, however, I'm not开发者_Python百科 sure how they're doing that aspect of it.

I know that PHP has a couple functions, 'imagegrabscreen' and 'imagegrabwindow' but they only work for Windows users so I have my doubts that this is what they're using.

So, my question is how are they turning the DOM into an image?

---

Google+ doesn't take the screenshot entirely on the client side. It sends the local (rendered) DOM to the server, renders it to an image, and returns the created image.

You can test this by adding a local image to the page (using Firebug), and then trying to create a feedback. That image won't be present.

---

JavaScript can read the DOM and render a fairly accurate representation of that using canvas. I have been working on a script which converts html into an canvas image. Decided today to make an implementation of it into sending feedbacks like you described.

The script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

It does not require any rendering from the server, as the whole image is created on the clients browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.

Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).

For more information, have a look at the examples here:

http://hertzen.com/experiments/jsfeedback/

---

My guess is that they gather information about page in question, highlighted blocks etc. render that page in an in memory version of a web browser and takes a screenshot of it.

Edit To clearify:

If client is viewing http://some.page?someArg=someValue

The server renders http://some.page?someArg=someValue in an in memory browser takes a screenshot, sends the image to the client.