TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Using HTML5/Canvas/Javascript to take screenshots

163 pointsby meowover 13 years ago

7 comments

glennslover 13 years ago
Gecko has a really nice css feature called -moz-element (<a href="https://developer.mozilla.org/en/CSS/-moz-element" rel="nofollow">https://developer.mozilla.org/en/CSS/-moz-element</a>) that can be used to apply a _live_ view of a dom subtree as the background of another element.<p>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.<p><a href="http://hacks.mozilla.org/2010/08/mozelement/" rel="nofollow">http://hacks.mozilla.org/2010/08/mozelement/</a> <a href="https://developer.mozilla.org/media/uploads/demos/D/a/David%20Mulder/c65123ae9f13eaf293101077308a23f0/aero-windows_1316465302_demo_package/index.html" rel="nofollow">https://developer.mozilla.org/media/uploads/demos/D/a/David%...</a><p>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! <a href="http://dev.w3.org/csswg/css3-images/#element-reference" rel="nofollow">http://dev.w3.org/csswg/css3-images/#element-reference</a>
pbhjpbhjover 13 years ago
Are these screenshots though?<p>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.
评论 #3579430 未加载
jcrover 13 years ago
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). <a href="https://addons.mozilla.org/en-US/firefox/addon/shooter/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/shooter/</a><p>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.
评论 #3579210 未加载
paraschopraover 13 years ago
Try using their console: <a href="http://html2canvas.hertzen.com/screenshots.html" rel="nofollow">http://html2canvas.hertzen.com/screenshots.html</a><p>Very impressive! Can someone explain how _exactly_ does it work? Has the author implemented a renderer inside JavaScript?
评论 #3579161 未加载
评论 #3579172 未加载
ck2over 13 years ago
Nifty but still not convinced that is how Google is doing it.<p>How do you handle iframes with content external to the domain?
评论 #3579182 未加载
nixarnover 13 years ago
Wow, that's impressive. Works really well.
tluyben2over 13 years ago
I used this for our screenshot app as well :) It's really nice. Some quirks, but those are hardly noticeable.