html2canvas Tutorial?

Question

I'd like to use html2canvas but I have no idea how. No offense to Hertzen, he's made a great script, but the documentation is incomplete so it's rather useless. I looked at JSFeedback but the whole script (which I had to 'steal' from the HTML source) works only with his version of html2canvas which, in the comments, he says is unready for open-sourceness. Any help will be truly appreciated - Apparatix.

Accepted Answer

html2canvas basically takes everything in the DOM object you specify -- all children, and their children, etc. - and replicates them in a Canvas object (found in the canvas variable passed in to the function) based on their various characteristics, including borders, content, styles, etc. canvas.toDataURL() converts the contents of that Canvas to a stream of characters that represent an image that can be used as a src in an tag, i.e.

```
<img src=imgdataurl>
```

or setting a background-image via javascript/jquery, like this --

```
$('#someDiv').css('background-image','url('+imgdataurl+')')
```

If it isn't working for you, it may be that you're specifying an incorrect parent DOM element -- you can try $('body') instead of $('#myObj') and see if anything comes up.

html2canvas Tutorial?

Solution

Problem