html2canvas image is not getting saved

Question

I am using html2canvas to capture the screenshot of a div and save it... But it is not getting saved.

 function captureDiv() { const div = document.getElementById('myDiv'); html2canvas(div, { scale: 2, onrendered: (canvas) => { let link = document.createElement('a'); link.setAttribute('download', 'screenshot.png'); link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")); link.click(); } }); }

 div { width: 60px; height: 50px; text-align: center; border: 1px solid; line-height: 3; }

 <div> HI </div> <button onclick="captureDiv()">Capture</button> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

Answer 1

You need to call then . As they are saying in this thread , it replace onrederer . So it would be something like:

function captureDiv() {
  const div = document.getElementById('myDiv');

  html2canvas(div, {scale: 2}).then(canvas =>  {
    let link = document.createElement('a');
    link.setAttribute('download', 'screenshot.png');
    link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    link.click();
  });
}