html2canvas Tutorial – Part 1: Taking Screenshot of Webpage


html2canvas is a javascript library that enable you to take screenshot of webpage or some part of it It will scan all HTML element on the page, then build up the screenshot and return the Canvas Object In this tutorial, we will show you how to capture the screenshot and put it on the webpage I’ve put some texts and a simple div box on the example page I’m going to add a code that will capture and put the screenshot to this div box (#box1) when clicking the “Get screenshot” link I already went ahead and coded the link to call the “getScreenshot” function when clicked and also included the html2canvas library To use html2canvas – simply call the html2canvas function. you will need to pass the following parameters First is the element you want to capture the screenshot If you want to capture the screenshot of the entire page, just pass the body to it The second parm will let us define the properties of the screenshot canvas such as width or height, etc.. If nothing was specfied, default value will be used Since we want to put our screenshot to the div box, we’ll need to use the eventhandler “onrendered” “onrendered” will be triggered when html2canvas has finished capturing the screenshot and the canvas object is ready to use I’m going to get the “box1” object and put the rendered canvas (that contains screenshot) to it I’ll also add a code to clear the div box everytime we take the screenshot Finally, I’ll add some CSS to make the screenshot auto fit to the div box simply set max-width and max-height to 100% OK, everything is all set. Let’s test the link! It works! Let’s see if we continue to take more…. This time, I’ll try to take a screenshot of a specific element Let’s try passing the only the text div (#text) to the html2canvas Now you know the basic of html2canvas. However, we’ll need to do bit of work if we want to let users “save” or “download” the screenshot as a file! We’ll cover that in the next release Thank you for watching – subscribe if you like us 🙂

16 thoughts on “html2canvas Tutorial – Part 1: Taking Screenshot of Webpage

  1. Hi, how can I get the image with white background color, I downloaded it but the image have caro color like this

    https://lh3.googleusercontent.com/-pRgBebn0sFs/V0lWYQkdfSI/AAAAAAAAAFg/59HMizgWeGMsCMlTb_1aneOHSINILOJmgCCo/s800/Screenshot%2Bfrom%2B2016-05-28%2B15%253A26%253A55.png

  2. It works. The video is just outdated. The lib was rewritten, use official manual on the site (not on the github wiki, seems like it's outdated, too).

  3. when I am trying to get a screenshot from a div where a google map api element is displayed I just got de bordered "space" where the map is

  4. Url of html2canvas changed just delete reference to it and add https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js. New fiddle https://jsfiddle.net/yq24zLe3/

Leave a Reply

Your email address will not be published. Required fields are marked *