html2canvas Tutorial – Part 1: Taking Screenshot of Webpage

By | January 22, 2020


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. Raj Kumar Post author

    Uncaught (in promise) ReferenceError: $ is not defined > I have this error

    Reply
  2. mark stevens Post author

    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

    Reply
  3. Giant Malik Post author

    i am trying to take screenshot from a video. how to do that?

    Reply
  4. prasad wadekar Post author

    i have use this html2canvas in my project it works fine on Localhost but on server it doesn't..? can any one help

    Reply
  5. niciodevinicio Post author

    It looses quality!
    I made it to a codebar and it isnt legible anymore!

    Is possible to solve it?

    Reply
  6. sajid ahmed Post author

    how to take the screenshot of the input text given by the user?????

    Reply
  7. chandana tharanga Post author

    how to save this image to server directory?

    Reply
  8. Зигмунд Крюква Post author

    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).

    Reply
  9. WilsoN!Tu Post author

    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

    Reply
  10. muhamed alibegovic Post author

    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/

    Reply

Leave a Reply

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