Html2Canvas Library Example to Take Screenshot of Whole Webpage on Button Click in Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be taking whole screenshot of webpage in javascript using html2canvas library. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<html>
  <head>
    <title>Take screenshot of webpage with Html2Canvas</title>
    <script
      type="text/javascript"
      src="https://makitweb.com/demo/html2canvas/html2canvas-master/dist/html2canvas.js"
    ></script>
  </head>
  <body>
    <h1>Take screenshot of webpage with html2canvas</h1>
    <div class="container" id="container">
      <img
       
        width="100"
        height="100"
      /> src="https://makitweb.com/demo/html2canvas/images/image1.jpg"
      <img
        src="https://makitweb.com/demo/html2canvas/images/image2.jpg"
        width="100"
        height="100"
      />
      <img
        src="https://makitweb.com/demo/html2canvas/images/image3.jpg"
        width="100"
        height="100"
      />
    </div>
    <br />
    <input
      type="button"
      id="but_screenshot"
      value="Take screenshot"
      onclick="screenshot();"
    /><br />

    <!-- Script -->
    <script type="text/javascript">
      function screenshot() {
        html2canvas(document.body, { allowTaint: true }).then(function (
          canvas
        ) {
          document.body.appendChild(canvas);
          console.log(canvas.to)
        });
      }
    </script>
  </body>
</html>

Leave a Reply