

Using HTML5/Canvas/Javascript to take screenshots - meow
http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6678156#6678156

======
glennsl
Gecko has a really nice css feature called -moz-element
(<https://developer.mozilla.org/en/CSS/-moz-element>) that can be used to
apply a _live_ view of a dom subtree as the background of another element.

People have done some awesome stuff with this, such as reflections, transition
effects, and even recreating the blurred aero skin, by combining it with svg
effects.

<http://hacks.mozilla.org/2010/08/mozelement/>
[https://developer.mozilla.org/media/uploads/demos/D/a/David%...](https://developer.mozilla.org/media/uploads/demos/D/a/David%20Mulder/c65123ae9f13eaf293101077308a23f0/aero-
windows_1316465302_demo_package/index.html)

And what's even cooler, this has been added to the CSS3 draft spec, so it
might actually soon be implemented in the other layout engines!
<http://dev.w3.org/csswg/css3-images/#element-reference>

------
pbhjpbhj
Are these screenshots though?

I thought the point of a screenshot was to capture how the page/screen has
been rendered by an actual browser/platform. Isn't this a different rendering?
If the quirks aren't rendered then the use is limited.

~~~
condiment
The original question was to know how Google was driving their G+ feedback
feature. In the context of capturing user feedback, the point of a screenshot
is to relay information about the state of the user's environment to someone
else, without the need for physical proximity.

In my experience, users who report feedback are typically concerned more with
the data on the page than how the page itself looks when it's rendered. In
these cases, a screenshot acts as proof and can immediately focus the problem
without requiring a lot of written description. Among users who have non-
trivial feedback about a website, the likelihood of their being able to
clearly and concisely describe their problem is vanishingly small, and
removing the friction of attaching screenshots to their issue reports is
immensely helpful.

------
jcr
If you haven't seen it yet, the "Shooter" addon for firefox basically does
this same sort of thing (screenshot of page by using the canvas).
<https://addons.mozilla.org/en-US/firefox/addon/shooter/>

The only real bug I've seen in it is the use of white as the default
background color in pages, with all page styles (and css files) loaded on
top... This means it's (properly?) ignoring the user defined page background
color.

~~~
ck2
Code that runs with access to the chrome can "cheat" and just use

[https://developer.mozilla.org/en/Drawing_Graphics_with_Canva...](https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas)

------
paraschopra
Try using their console: <http://html2canvas.hertzen.com/screenshots.html>

Very impressive! Can someone explain how _exactly_ does it work? Has the
author implemented a renderer inside JavaScript?

~~~
beaumartinez
He explains on its GitHub page[1]—"the script renders the current page as a
canvas image, by reading the DOM and the different styles applied to the
elements."

[1] <https://github.com/niklasvh/html2canvas#readme>

------
ck2
Nifty but still not convinced that is how Google is doing it.

How do you handle iframes with content external to the domain?

~~~
meow
They use a proxy for that (though currently its not implemented properly -
example: they are directly sending /background-image urls as
/proxy/url("someimage") - so not loading). But I think this is a nice base to
build on. All that needs to be done is render more css properties and send
url("") for images properly.

------
nixarn
Wow, that's impressive. Works really well.

------
tluyben2
I used this for our screenshot app as well :) It's really nice. Some quirks,
but those are hardly noticeable.

