Estoy codificando una especie de visualizador de interfaz de usuario para un juego, y quiero que la interfaz de usuario se descargue al hacer clic en un botón, estoy usando html2canvas para eso. El problema es que muestra algunas grandes compensaciones en la imagen cuando se descarga.

Resultado:

Esperado: (sin el fondo, no importa).

Aquí está mi código:

 function DOWNLOAD() { var container = document.getElementById("DrawBox");; /* full page */ window.scrollTo(0, 0); html2canvas(container, { allowTaint: true, }).then(function(canvas) { var link = document.createElement("a"); document.body.appendChild(link); link.download = "html_image.jpg"; link.href = canvas.toDataURL(); console.log(container) link.target = '_blank'; link.click(); }); }

Código de cuadro de dibujo CSS (es un div en mi código);

 .drawBox { position: absolute; box - sizing: content - box; width: 100 % ; height: 500 px; margin - top: 20 px; width: 800 px; box - shadow: 0 0 6 px hsl(200 deg 100 % 80 % ); margin - left: 200 px; text - shadow: 0 0 7 px hsl(200 deg 100 % 80 % ); background - color: rgb(25, 63, 83, 0.1); opacity: 1; transition: 1 s; }

Todos los divs creados se colocan en drawBox. ¡Gracias por adelantado!