Trying to use html2canvas to take a screenshot of a div element and save it, but encountering issues with the saving process.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2baa6bfbee0b1b3bca4b3a192e3fce2fce2ffa0b1fce7">[email protected]</a>/dist/html2canvas.min.js"></script>