Whenever I press Download ScreenShot Button I get this error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'cloneNode') at d (dom-to-image.min.js:2:1519) How do I fix this - HTML Code for understanding my problem - https://jsfiddle.net/m5gneoL7/
<button id="dload_img">Download</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
<script>
$(document).ready(function() {
$("#dload_img").click(function() {
domtoimage.toBlob(document.getElementById('whole_page','')).then(function(blob){
window.saveAs(blob, "output.png");
});
});
});
</script>In your HTML, change:
<div class="whole_page">
to:
<div id="whole_page">
Because you are using document.getElementById to find whole_page, it needs to be the id of the div. If you really wanted to find the div by a class, then change the javascript to:
document.getElementsByClassName('whole_page')[0]
([0] because it returns an array)
I tried your fiddle and that does solve the immediate problem, but that just uncovers other breakage.