HTML2Canvas no representa div completo, ¿solo lo que se ve en la pantalla?

estoy tratando de usar HTML2Canvas para representar el contenido de un div. Aquí está el código:

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

Estoy usando v5 beta 3.

Cuando se ejecuta este código, solo muestra lo que se ve en la pantalla. los #potenzial-page div es esencialmente la página completa, menos el encabezado y el pie de página. Todo el contenido de este div es visible al desplazarse (hay algunos elementos ocultos, pero no quiero que los elementos ocultos estén visibles en la imagen).

No puedo encontrar lo que está mal o por qué no guardará todo el div. También debo señalar que parece que la imagen es tan alta como el div pero solo parcialmente visible.

Para dar un ejemplo de lo que quiero decir, aquí hay una comparación:

La izquierda es cómo HTML2Canvas debería representar el div. La derecha muestra cómo se representa cuando ejecuta el código anterior. La imagen de la derecha es lo que se ve en la pantalla de mi navegador.

Intenté agregar el height opción pero no hace la diferencia.

ACTUALIZAR

Si me desplazo hasta la parte superior de la página después ejecute el script, renderizará todo el div como debería.

¿Cómo renderizo el div sin tener que desplazarme hasta la parte superior?

espero que te ayude

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
        });

Una solución que funcionó para mí fue agregar lo siguiente a mi css:

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

Evita que html2canvas limite la representación al área visible (que parece ser el valor predeterminado).

Mira aquí: https://github.com/niklasvh/html2canvas/issues/117

solía window.scrollTo()en mi caso y me funciono.

A continuación se muestra un código de muestra

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

Puede agregar la posición de desplazamiento como una variable en html2canvas, lo que elimina la necesidad de desplazarse por la página.

html2canvas(document.querySelector("#your-element"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {

Acabo de hacer algo como esto y funcionó para mí:

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight, 

Si tiene una altura establecida en el div que desea convertir en un lienzo, debe eliminarlo antes de tomar la instantánea. De lo contrario, simplemente lo cortará debido a esa altura.

 $(".yourElemThatHasSomeHeightSet").css("height", "");

Luego notará que al desplazarse hacia abajo, seguirá cortando su documento. Simplemente haz un:

$("html, body").scrollTop(0);

antes de tomar la instantánea.

Así es como lo he logrado en Reactjs.

El principal problema fueron relación y escala
Si haces un rápido ventana.dispositivoPixelRatiosu valor predeterminado es 2, lo que estaba causando el problema de la mitad de la imagen.

const printDocument = () => {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new jsPDF("l", "mm", "a0"); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  });
}