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 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.