
Html2canvas - Webpages Screenshots with JavaScript - tilt
http://html2canvas.hertzen.com/screenshots.html
======
tzury
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.

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

------
tilt
It's on GitHub btw

<https://github.com/niklasvh/html2canvas>

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

~~~
niklasvh
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.

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

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

~~~
woodall
Looks like <http://html2canvas.appspot.com> is over quota.

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

~~~
woodall
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
copy of the proxy source available at
<https://github.com/niklasvh/html2canvas-proxy> now

~~~
woodall
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.

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

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

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

~~~
simonsarris
That's done on the server

[http://stackoverflow.com/questions/4912092/using-
html5-canva...](http://stackoverflow.com/questions/4912092/using-html5-canvas-
javascript-to-take-screenshots)

~~~
csytan
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...](http://stackoverflow.com/questions/4912092/using-html5-canvas-
javascript-to-take-screenshots/6654253#6654253)

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

~~~
owyn
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
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
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)

