Html2canvas - Webpages Screenshots with JavaScript | Hacker News Reader

Html2canvas - Webpages Screenshots with JavaScript

html2canvas.hertzen.com

120 pointstilt28 comments

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.

Awesome! There are some really things you could use this for. I have done something similar here: 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) it holds up pretty well.

It's on GitHub btw

https://github.com/niklasvh/html2canvas

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

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.

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.

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

Looks like http://html2canvas.appspot.com is over quota.

Yep, didn't think the proxy would be getting +100k requests within 24 hours. Guess we need to wait for tomorrow :(

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.

copy of the proxy source available at https://github.com/niklasvh/html2canvas-proxy now

Officially watching it :D

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.

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".

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

It seems like Google has perfected it (Send Feedback), but isn't sharing. :(

That's done on the server

http://stackoverflow.com/questions/4912092/using-html5-canva...

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-canva...

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.

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.

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.

The problem with server side is you're limited to things that are not behind a login.

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.

For urls true. But not if you post the html source from a bookmarklet or a script on the page.

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

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.

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.

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)

Reply on news.ycombinator.com