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.
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.
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'));
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With