Javascript Download Image Screenshot From HTML Canvas

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- html2canvas.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="capture">
 <div class="capture-inner d-relative">
 <div class="d-absolute background"><img src="background.jpg" /></div>
 <div class="d-absolute text-content">
 <h1>This is the title.</h1>
 <p>This is the paragraph. </p>
 </div>
 </div>
</div>

<a id="preloading" class="d-none">Preloading</a>
<button id="download">Download</button>

<script>
 
 jQuery(function(){
 
 html2canvas(jQuery("#capture")[0]).then(function(canvas) {
 
 var preloading_link = document.getElementById("preloading");
 // var preloading_link = document.createElement("a");
 preloading_link.setAttribute("download", "imagename.png");
 preloading_link.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));

 jQuery("#download").click(function(){
 preloading_link.click();
 })
 })
 }); 
 
</script>