Question 305360 in Html Question posted in
Some basic documentation can be found here.

Html – how to take the div i created and download it as a png?

i created a canvas using javascript and appended it to an output div, i want to take that canvas and download it as a png on client side but i could not find a way to do it

i tried even canva2image but i could not make it work
heres my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="html2canvas.js"></script>
</head>
<body>
    <div id="tabela"><p>this is a test</p></div>
    <button onclick="takeshot()">Copy</button>
    <div id="output"></div>
    
    <script type="text/javascript">
        // Define the function  
        // to screenshot the div 
        function takeshot() {
          let div = document.getElementById('tabela');
          html2canvas(div).then(
            function(canvas) {
              document
                .getElementById('output')
                .appendChild(canvas);
              })
        }
      </script>
</body>
</html>
Tags:

2

Answers


  1. 0

    You can use this js file.

    https://html2canvas.hertzen.com/dist/html2canvas.min.js

    I add sample code below.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
      #myDiv {
        background-color: lightgreen;
        padding: 40px 20px;
        color: blue;
      }
    </style>
    <title>Download Div as PNG</title>
  </head>
  <body>
    <div id="myDiv">
      <h1>Hello, this is the content!</h1>
    </div>

    <button onclick="handleDownload()">Download as PNG</button>

    <script>
      function handleDownload() {
        const divElement = document.getElementById("myDiv");

        html2canvas(divElement).then((canvas) => {
          const imgData = canvas.toDataURL("image/png");

          const link = document.createElement("a");
          link.href = imgData;
          link.download = "div_image.png";
          link.click();
        });
      }
    </script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    You can test this.

    function handleDownload() {
  const divElement = document.getElementById("myDiv");

  html2canvas(divElement).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");

    const link = document.createElement("a");
    link.href = imgData;
    link.download = "div_image.png";
    link.click();
  });
}
    #myDiv {
  background-color: lightgreen;
  padding: 40px 20px;
  color: blue;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style>

  </style>
  <title>Download Div as PNG</title>
</head>

<body>
  <div id="myDiv">
    <h1>Hello, this is the content!</h1>
  </div>

  <button onclick="handleDownload()">Download as PNG</button>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search