html2canvas Tutorial?
Solution 1
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.
Solution 2
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'));
}
});
Related videos on Youtube
apparatix
Updated on September 15, 2022Comments
-
apparatix over 1 year
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.
-
apparatix over 11 yearsDid what you said, but I see nothing. What exactly does
canvas.toDataURL()
do? BTW, thanks for the reply. -
apparatix over 11 yearsGot it working, but one question - how do I capture other pages?
-
sneuf over 11 yearsWell, that's a different story... You need to open that other page in order to execute that code. The page needs to be rendered on the screen in order to use html2canvas.
-
apparatix over 11 yearsHertzen himself seems to have done it in the test console here: html2canvas.hertzen.com/screenshots.html
-
sneuf over 11 yearsTrue -- but he appears to pull the pages via server-side code first: "The only server interaction that is happening on this page is the proxy for loading the external pages/images into JSONP/CORS enabled page and onwards onto the JavaScript renderer script". Without looking at the code, I'd guess he's pulling it from the server via the server-side process, pushing it to the client, displaying it, and then rendering the Canvas object.
-
apparatix over 11 yearsYou are absolutely correct. Thanks for the help!