5 ms·

Html2canvas - Webpages Screenshots with JavaScript

120 points by tilt 15y ago

jawns 15y ago
If perfected, this has the potential to make a whole lot of people's lives easier -- including mine.
- ebzlo 15y ago
  It seems like Google has perfected it (Send Feedback), but isn't sharing. :(
  - trickjarrett 15y ago
    This was my initial thought as well, how can this technology be used to implement Google's Send Feedback functionality. Kevin Rose was right, if someone can build that as a service, they would do quite well.
    - websymphony 15y ago
      Saw this site few days ago on HN: http://bugmuncher.com/ http://bugmuncher.com/ Seems to be doing same sort of thing, except that the processing is being done on server side rather on client.
      - ebzlo 15y ago
        The problem with server side is you're limited to things that are not behind a login.
        coconutrandom 15y ago
        For urls true. But not if you post the html source from a bookmarklet or a script on the page.
        MattBearman 15y ago
        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.
  - simonsarris 15y ago
    That's done on the server http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots http://stackoverflow.com/questions/4912092/using-html5-canva...
    - csytan 15y ago
      Seems like it's not. In the same thread, a googler mentions it's done completely client side. http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6654253#6654253 http://stackoverflow.com/questions/4912092/using-html5-canva...
    - ebzlo 15y ago
      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.
bambax 15y ago
This is great. Is the size of the image adjustable? I'm developing an online text editor and this would be a great tool to display some kind of "page preview".
- deleted 15y ago
  [deleted]
jamesteow 15y ago
I'm using the latest Chrome. No image preview is showing up.
- woodall 15y ago
  Looks like http://html2canvas.appspot.com http://html2canvas.appspot.com is over quota.
  - niklasvh 15y ago
    Yep, didn't think the proxy would be getting +100k requests within 24 hours. Guess we need to wait for tomorrow :(
    - woodall 15y ago
      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
      - niklasvh 15y ago
        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.
      - niklasvh 15y ago
        copy of the proxy source available at https://github.com/niklasvh/html2canvas-proxy https://github.com/niklasvh/html2canvas-proxy now
tilt 15y ago
It's on GitHub btw https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas
tzury 15y ago
basically, it is a browser rendering engine written in JS and output to canvas. It is a browser implementation in JS at some extent. This is truly inspiring.
arkitaip 15y ago
paraschopra mentioned PhantomJS for doing the same thing at couple of days ago http://news.ycombinator.com/item?id=2758438 http://news.ycombinator.com/item?id=2758438
- owyn 15y ago
  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.
  - paulirish 15y ago
    can you share your code for doing the screencaps? there are a few posts about it online but would love more detail on the setup.
    - owyn 15y ago
      It's a one liner. Once a page is loaded into the browser: page.render(path_to_output); I think it can save in PDF, GIF and PNG formats (it checks the extension on the filename to determine format)
zbanks 15y ago
I noticed that Google+ allowed something similar when sending bug reports. Do they use a similar method?
- niklasvh 15y ago
  Looking at the supported browsers on http://www.google.com/tools/feedback/intl/en/index.html 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 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.
bgrins 15y ago
Awesome! There are some really things you could use this for. I have done something similar here: https://github.com/bgrins/DrawWindow https://github.com/bgrins/DrawWindow 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) * Iframes For basic text and images (such as http://bgrins.github.com/DrawWindow/tests/basic.html http://bgrins.github.com/DrawWindow/tests/basic.html) it holds up pretty well.
url2png 15y ago
http://url2png.com/dom2png/ http://url2png.com/dom2png/ 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.

120 points by tilt 15y ago

jawns 15y ago

If perfected, this has the potential to make a whole lot of people's lives easier -- including mine.

ebzlo 15y ago
It seems like Google has perfected it (Send Feedback), but isn't sharing. :(
- trickjarrett 15y ago
  This was my initial thought as well, how can this technology be used to implement Google's Send Feedback functionality. Kevin Rose was right, if someone can build that as a service, they would do quite well.
  - websymphony 15y ago
    Saw this site few days ago on HN: http://bugmuncher.com/ http://bugmuncher.com/ Seems to be doing same sort of thing, except that the processing is being done on server side rather on client.
    - ebzlo 15y ago
      The problem with server side is you're limited to things that are not behind a login.
      - coconutrandom 15y ago
        For urls true. But not if you post the html source from a bookmarklet or a script on the page.
      - MattBearman 15y ago
        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.
- simonsarris 15y ago
  That's done on the server http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots http://stackoverflow.com/questions/4912092/using-html5-canva...
  - csytan 15y ago
    Seems like it's not. In the same thread, a googler mentions it's done completely client side. http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6654253#6654253 http://stackoverflow.com/questions/4912092/using-html5-canva...
  - ebzlo 15y ago
    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.

bambax 15y ago

This is great. Is the size of the image adjustable? I'm developing an online text editor and this would be a great tool to display some kind of "page preview".

deleted 15y ago
[deleted]

jamesteow 15y ago

I'm using the latest Chrome. No image preview is showing up.

woodall 15y ago
Looks like http://html2canvas.appspot.com http://html2canvas.appspot.com is over quota.
- niklasvh 15y ago
  Yep, didn't think the proxy would be getting +100k requests within 24 hours. Guess we need to wait for tomorrow :(
  - woodall 15y ago
    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
    - niklasvh 15y ago
      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.
    - niklasvh 15y ago
      copy of the proxy source available at https://github.com/niklasvh/html2canvas-proxy https://github.com/niklasvh/html2canvas-proxy now

tilt 15y ago

It's on GitHub btw https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas

tzury 15y ago

basically, it is a browser rendering engine written in JS and output to canvas. It is a browser implementation in JS at some extent. This is truly inspiring.

arkitaip 15y ago

paraschopra mentioned PhantomJS for doing the same thing at couple of days ago http://news.ycombinator.com/item?id=2758438 http://news.ycombinator.com/item?id=2758438

owyn 15y ago
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.
- paulirish 15y ago
  can you share your code for doing the screencaps? there are a few posts about it online but would love more detail on the setup.
  - owyn 15y ago
    It's a one liner. Once a page is loaded into the browser: page.render(path_to_output); I think it can save in PDF, GIF and PNG formats (it checks the extension on the filename to determine format)

zbanks 15y ago

I noticed that Google+ allowed something similar when sending bug reports. Do they use a similar method?

niklasvh 15y ago
Looking at the supported browsers on http://www.google.com/tools/feedback/intl/en/index.html 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 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.

bgrins 15y ago

Awesome! There are some really things you could use this for. I have done something similar here: https://github.com/bgrins/DrawWindow https://github.com/bgrins/DrawWindow 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) * Iframes For basic text and images (such as http://bgrins.github.com/DrawWindow/tests/basic.html http://bgrins.github.com/DrawWindow/tests/basic.html) it holds up pretty well.

url2png 15y ago

http://url2png.com/dom2png/ http://url2png.com/dom2png/ 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.