Quiero guardar div como imagen. Intento muchas maneras, como usar html2canvas y htmlshot y DOM to Image

pero no funciona correctamente para el estilo de filtro y también para la imagen de fondo. Configuré la imagen de fondo de la URL local

mi div que quiero convertirlo a la imagen tiene este estilo: filtro (desenfoque - escala de grises - sepia - brillo - invertir - rotación de tono) e imagen de fondo

Yo uso html2canvas así:

estilo div

 #root { background-image: url("wallpaper.jpg"); background-size: 100% 100%; background-position: center; width: 355px; height: 355px; border-radius: 4px; margin-bottom: 5px; filter: invert(82%) blur(0.5px) grayscale(100%) sepia(1) brightness(0.8) hue-rotate(180deg) saturate(2); }

codigo js

 <script src="htmlcanvas.js"></script> <script> html2canvas(document.getElementById("root")).then(function(canvas) { document.body.appendChild(canvas); }); </script>

y esta es la salida:

producción