Cada vez que presiono el botón Descargar captura de pantalla, aparece este error No capturado (en promesa) TypeError: No se pueden leer las propiedades de nulo (leyendo 'cloneNode') en d (dom-to-image.min.js: 2: 1519) ¿Cómo soluciono esto? - Código HTML para entender mi problema - 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>En tu HTML, cambia:
<div class="whole_page">a:
<div id="whole_page"> Debido a que está utilizando document.getElementById para encontrar la whole_page , debe ser la id del div . Si realmente quería encontrar el div por una class , cambie el javascript a:
document.getElementsByClassName('whole_page')[0]([0] porque devuelve una matriz)
Probé tu violín y eso resuelve el problema inmediato, pero eso solo descubre otras roturas.