4

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?

Jamie Taniguchi
  • 387
  • 4
  • 13
  • Should be an option, after all; you can also turn DOM into a PDF.. – Joshua - Pendo Jul 13 '11 at 10:42
  • Perhaps they're leveraging the Apps API in some way, I found this: http://code.google.com/chrome/extensions/experimental.clipboard.html, otherwise many many posts about the lack of JS access to clipboard for security reasons. Interesting question! – danjah Jul 13 '11 at 10:57
  • 1
    @Jamie, `imagegrabscreen` runs on the web server and takes a screenshot of the web server. That isn't relevant here. :) Also, possible duplicate of [Using HTML5/Canvas/Javascript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) and also [this question](http://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-dit-it-no-need). – bzlm Jul 13 '11 at 10:58

3 Answers3

4

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.

Dogbert
  • 212,659
  • 41
  • 396
  • 397
  • 1
    they do render it fully on the client. If you provide an image which isn't available under same domain they use a proxy to fetch it, but it is rendered onto the canvas exactly the same way as it would with a local image. – Niklas Jul 15 '11 at 18:01
  • 3
    @blzm https://twitter.com/#!/ElliottZ/status/89520809147772929 - tech lead for Google Feedback. + The browser requirements on http://www.google.com/tools/feedback/intl/en/index.html give a **very** good idea on how what exactly they use to perform many of the tasks – Niklas Jul 17 '11 at 11:08
  • @Niklas, that's interesting. I'll try to experiment more with their feedback mechanism. – Dogbert Jul 17 '11 at 11:12
  • @Dogbert https://github.com/niklasvh/html2canvas might be of interest to you. Still in a relatively early stage, but as everything needs to be manually rendered, building up support for more CSS/elements as it moves on. – Niklas Jul 17 '11 at 11:15
1

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/

Niklas
  • 29,752
  • 5
  • 50
  • 71
-1

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.

Marcus
  • 1,866
  • 1
  • 20
  • 33
  • It's the "and takes a screenshot of it" part that's on trial here. :) – bzlm Jul 13 '11 at 10:41
  • And what is the trial here? Taking a screenshot of an application? How problematic is that? You know you can do that in a modern operatingsystem right? – Marcus Jul 13 '11 at 10:43
  • this is for a web application that runs in a browser. No matter how modern the "operatingsystem", that's not unproblematic (cf. [this answer](http://stackoverflow.com/questions/6677571/how-to-take-page-screenshots-like-google/6677599#6677599)). – bzlm Jul 13 '11 at 10:45
  • Are you kidding me here? Let me give you an example: run firefox in an headless X session, render a page, take screenshot of FF's content. Done. – Marcus Jul 13 '11 at 10:50
  • 1
    I think you're misunderstanding the context of the question. Also, you seriously need to chill. :) – bzlm Jul 13 '11 at 10:53
  • I'm chilled :) Can you please explain the context then. Cause I don't see any problem with this. Look here for example: http://blog.mozilla.com/ted/2010/07/29/moz-headless-screenshot/ – Marcus Jul 13 '11 at 10:57
  • [this is what the question wants](http://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-dit-it-no-need). The phrasing makes it sound like it's about what you're talking about, but it isn't. As for turning HTML into a screenshot, I agree, starting an actual browser is probably the simplest solution. – bzlm Jul 13 '11 at 11:02
  • And my solution solves that problem, thanks for the down vote btw. :) – Marcus Jul 13 '11 at 11:06
  • 1
    Google+ is more complicated than `someArg=someValue`. When submitting feedback, it's important that all the elements on the page match what the user is seeing. For a site that's highly personalized and relies heavily on AJAX for loading data dynamically, I don't think `someArg=someValue` is realistic. Make a better answer, and I'll upvote instead. :) – bzlm Jul 13 '11 at 11:10
  • I thinks it's enough. If you bring all the changes made by user to the server (via post or get), you can achieve this whether it's AJAX or not. Would be easy to see using fiddler/firebug. – Marcus Jul 13 '11 at 12:07