15

I don't have an invite but it been used on TWIG. It works as following:

You can select a parts to highlight, parts to blackout. In the next step a screenshot of that is created (??) and you can preview what other browser information is transmitted.

So how does Google create that screenshot? does it send the complete modified DOM for server-side processing? or what other black magic is involved here?

John Conde
  • 217,595
  • 99
  • 455
  • 496
Jakob Cosoroaba
  • 1,702
  • 4
  • 24
  • 34

4 Answers4

11

The highlights and black outs are just HTML divs. The screenshot of the page is a canvas.

I used Chrome's developer tools to confirm this. It even works in Firefox and Internet Explorer, so it definitely isn't just a Chrome thing.

Here's a screenshot of developer tools with one of the highlight elements highlighted to show that it is a div:

Google Chrome Developer Tools - Feedback Tool

There is one canvas:

Canvas

When the dialog says this:

Please wait while we take a snapshot of the page so you can highlight the relevant areas.

It seems to be rendering a screenshot of the page on the server (as there is a request in the Network tab and it has to do with a snapshot and the feedback according to the variables in the request URL) and then it places the screenshot over the page.

After you click on "Next," another dialog opens with all of the information and renders the final screenshot with your highlights and black outs in it.

Final dialog

I'm not sure how they did the "Highlighted Text" part though.

Nathan
  • 11,814
  • 11
  • 50
  • 93
2

It could just send the entire DOM tree up to the server and have it rendered on the other end.

bratsche
  • 2,666
  • 20
  • 23
  • This was my first thought as Google does have a way to render images of sites server side. I wanted to test it out but I don't want to send garbage feedback to try to capture it. The only issue with this method is that it means that any rendering bugs won't show up. – Kevin Cox Oct 22 '12 at 19:32
0

dont know the feature, but how your describing it; its not a crossplatform feature and not in the specs. Your looking for drawWindow of the canvas element. They then base64/urlencode the canvas and send it to the server. Can imagine they back it with serverside black magic for IE6 support.. or they make google+ a html5 browser only thing..

japrescott
  • 4,736
  • 3
  • 25
  • 37
  • 2
    I don't think the whole thing is a ``-tag. – Jakob Cosoroaba Jun 29 '11 at 22:44
  • 1
    ever looked at the 'new' google images site? their just like a million canvas tags (for no apparent reason what-so-ever). It must be canvas, because there is no other way to make a printscreen of a website on the clientside (or I'm not understanding what the feature of google+ is, that Jakob Cosoroaba is describing) – japrescott Jun 30 '11 at 00:12
  • I don't see any canvas tags in the rendered content. I may be missing some, but without a doubt some of the data is plain old HTML. – Matt Jul 07 '11 at 19:26
0

It appears Google's updated feedback form screenshotter uses the browser's new display API to capture the screenshot. This allows it to get an accurate screenshot.

see this image

There's a cool library that does the same thing, if you want to make it yourself: FeedbackPlus

Willie Cheng
  • 7,679
  • 13
  • 55
  • 68
new_to_webdev
  • 16
  • 2