Here is the code which isn't working. Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is it not working?
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="main.css" /> <title>Poster</title> </head> <body> <div id="main_image"> <img src="image.jpg" id= "image"/> <div id="user_text">IT IS TOTALLY AWESOME</div> </div> <div id="edit_text_box"> <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea> <div id="change_size"> <span style="float: left;">FONT-SIZE : </span> <button id="decrease_size">-</button> <button id="increase_size">+</button> </div> <input id="submit" type="submit" value="SUBMIT" /> </div> <script type="text/javascript"> window.onload = function() { html2canvas( [ document.body ], { onrendered: function( canvas ) { document.body.appendChild( canvas ); } }); }; </script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/edit_text.js"></script> </body> </html>
I changed your code a little bit and it works:
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="main.css" /> <title>Poster</title> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript"> var Submit = function() { html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); }; </script> </head> <body> <div id="main_image"> <img src="image.jpg" id= "image"/> <div id="user_text">IT IS TOTALLY AWESOME</div> </div> <div id="edit_text_box"> <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea> <div id="change_size"> <span style="float: left;">FONT-SIZE : </span> <button id="decrease_size">-</button> <button id="increase_size">+</button> </div> <button onclick="Submit();" >Submit</button> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/edit_text.js"></script> </body> </html>
First, I added html2canvas JavaScript file (<script type="text/javascript" src="html2canvas.js"></script>). You can download it at https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and put that file to the same folder as your HTML. Apparently, you are trying to create something like a form, but there's no form tag in your code. You can call html2canvas either when you submit a form (you have to add <form> then) or using onclick attribute of a button. I changed your submit input element to button and bind Submit method to its onclick attribute. When user clicks the button, screenshot appears below the form.
