Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html2canvas Tutorial? [closed]

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.

like image 581
apparatix Avatar asked May 21 '12 20:05

apparatix


People also ask

How html2canvas works?

How does it work? html2canvas reads a webpage as a canvas image. It goes through the webpage's DOM and reads all present elements and styles. After html2canvas gathers all of the page structure information, it creates a representation of the page.


1 Answers

Give this a whirl --

In your index.html, add the following javascript files:

<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
 <script type="text/javascript" language="javascript" src="js/html2canvas.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js">
</script>

You can download the last two from: https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

In your Javascript, you can then code (replace #myObjectId with a valid JQuery selector):

$('#myObjectID').html2canvas({
    onrendered : function(canvas) {
    var img = canvas.toDataURL();
    // img now contains an IMG URL, you can do various things with it, but most simply:
        $('<img>',{src:img}).appendTo($('body'));
            }
        });
like image 183
sneuf Avatar answered Sep 24 '22 09:09

sneuf