Quiero usar toDataURL para descargar una imagen div específica

 <div class="webtoonImage"> </div> <!--side display webtoon-->

Pero debido a que mi div tiene un filtro de sombra paralela como un borde de contorno. Entonces, por eso toDataURL no lo capturó.

 .container { display: grid; filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(0px -1px 0px black) drop-shadow(1px 1px 0px black); }

Me preguntaba si es posible guardar la imagen con el borde del contorno de la sombra paralela.

Aquí está el enlace de video de los problemas: problema de demostración de enlace de video

Explique el problema en forma de imagen: Cuando hago clic en el botón de descarga:

Así se descarga el div de la imagen

No hay contorno de borde, la URL de datos no capturó el borde del contorno de la sombra

La sombra paralela está en la clase .container

Aquí es cuando apago la sombra

Aquí está la función toDataURL para descargar .div .webtoonImage:

 function downloadWebtoonDesktop() { html2canvas(document.querySelector(".webtoonImage")).then(function(canvas) { // document.body.appendChild(canvas); console.log("hello") var dataURL = canvas.toDataURL("image/png"); let downloadLink = document.createElement('a'); downloadLink.setAttribute('download', 'DiamondWebtoonLayout-Episode-.png'); let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream'); downloadLink.setAttribute('href', url); downloadLink.click(); // document.querySelector("#theimage9").src = theimage9; }); }

[SIN RESOLVER] enlace codepen