I'm interested to look through the source and see how this was implemented. There are many things that are really tricky to handle using the computedStyle way of rendering HTML. Just to name a few:
* Form elements
* Dotted, dashed, rounded borders
* Gradients
* Text with word-wrap: break-word applied (for some reason measuring each character does not work properly here).
* CSS Outlines can be tricky, though I have gotten that to work pretty well in my implementation using getClientRects().
* Overflows / scrolls with fixed width or height divs (and nested ones)
Looking at the supported browsers on http://www.google.com/tools/feedback/intl/en/index.html and some of the clearer bugs in their screenshots (enlarge the picture, check out for example text-underlining and compare with FF/Chrome), combined with what ElliottZ mentioned in this Twitter message https://twitter.com/#!/ElliottZ/status/89520809147772929, I could with quite high certainty say that they have a very similar approach to doing this. Having worked with this for some time already, I can see why they for example have not supported Opera, although the problem (presumably the reason they don't) can easily be fixed with wrapping text in temporary nodes for example. One major advantage they have, which works for their favor is that they use the script on pages they control, where as my approach is trying to get this working on any page, regardless of who created it with as bad CSS/HTML as they did. If you aren't gonna be using z-index positioning, no letter-spacing, no CSS3 properties, no HTML5 form elements etc. it can be very easy to make matching screenshot to the page.
For IE<9 the Flash option won't have to be the only option either, a server could be rendering the elements gathered from the users browser (in other words a canvas proxy for the canvas renderer).
In terms of my script, the aim is to try and get the compatibility down to FF3, IE6 (with non-canvas support through flashcanvas or server canvas), Opera (haven't looked much yet how old version would be able to support it), and Chrome.
I threw together a hybrid of client side DOM and url2png's distributed webpage rendering farm.
This proof of concept should be enough to kickstart a team needing this functionality today.
Best of both worlds in my (biased) opinion.
Mind telling us how the proxy works or putting up some source code(couldn't find the proxy source on github)? I am also lazy and didn't read the whole script source, i bet it could be recreated with some effort. uft :D
I'll put python/java/php sources up once I got the specs for the proxy more set (currently still could get some changes that could break the whole functionality), but in short it provides the images either base64 encoded jsonp if browser doesn't support XHR2, if it does, it provides it as an image with CORS enabled (prefered as it is slightly smaller than base64 encoded).
For the HTML, it just checks a simple charset check and does the same as for images.
There are plenty of examples of the script embedded on the page though, and you can always download a copy from github and try it on your own page meanwhile.
I'm working on a browsers addon to help with remote support, mostly my mom. Thought about VNC or the like, but that's a bit of an over kill when I can just run JS in the browser.
This works great in letting me see wth she is talking about when some website is broken. This is my play ground for it, bragcollege.com. If you want to log in and play around let me know.
If you check Inspect Element when hitting Send Feedback, I believe you can see some of their magic (includes HTML5's canvas element and flashcanvas.swf) which leads me to believe it's not done server side.
Also modifying the DOM preserves when hitting Send Feedback.
Saw this site few days ago on HN:
http://bugmuncher.com/
Seems to be doing same sort of thing, except that the processing is being done on server side rather on client.
BugMuncher founder/developer here - BugMuncher takes the entire DOM tree from the client and recreates it for the screenshot, so as long as any external CSS/images aren't behind authentication, it works fine on authenticated pages. In fact, most of our users use BugMuncher specifically on auth protected areas.
PhantomJS is great, although there are some bugs in the WebKit embedded inside QT because it's a bit old, it has the advantage of supporting flash plugins and it can do screen caps. I'm using it for a project now.
This is truly inspiring.