Html2canvas: No se puede obtener el contenido de divs con "display: none"

Html2canvas interpreta la visualización: ningún estilo correctamente y, por lo tanto, no representará un elemento oculto. Para lograr lo que desea, puede colocar absolutamente un elemento visible fuera de la ventana gráfica de la página (si lo que desea es "renderizar un elemento oculto").

Puede ser útil.
Gracias !

Funciona si y solo si el div tiene css que no es " display: none ". así que utilicé la combinación .show () y .hide () para hacer que el elemento esté visible y oculto para formar Canvas

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

Encontré información en Internet. Podemos configurar css a div especificado con " display: none " y luego agregar la opción onclone como arriba. Por favor agregue la opción "loggin: true" para ver qué sucede

En realidad, el truco de sacar el contenedor de una ventana gráfica con valores negativos de posición absoluta y superior / izquierda: no funciona en Firefox, arroja la excepción NS_ERROR_FAILURE

Aunque funciona en Chrome

Me encontré con este problema muy recientemente, y si desea que un div en particular sea invisible y se capture una captura de pantalla, configure las propiedades de css como

height: 0%
overflow:hidden

Esto no funciona para mí @ kchen1025

Terminé generando el lienzo inmediatamente después del div de destino, y luego oculté el div inmediatamente después de que se cargó el lienzo. El parpadeo es apenas perceptible.

Mi código se ve así:

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});

Hola, estoy trabajando con Angular 6 y "html2canvas" para crear un PDF con "jsPdf" .... Quería tomar una captura de pantalla a un div oculto y no pude hacerlo hasta que LO CONSIGUE

la captura se realiza al div con id "html-pdf"

"HTML"
` Carnet de estudiante / a>

div id = "pdf" * ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">

/ div
/ div`

"js o en angular es TypeScript"
`download2 () {
var imgcab: cadena;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {escala: 2}). Entonces (función (lienzo) {

var img = canvas.toDataURL ("imagen / png", 1);

var doc = new jsPDF ({
orientación: 'p',
unidad: 'mm',
formato: 'letra',
});

doc.addImage (img, 'PNG', 2,2,212,272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save ('testCanvas.pdf');
}); `

Y lo más importante es ocultar el div dentro de la pantalla.

"CSS"
#pdf { overflow: hidden; height: 0; }

el código crea un pdf con la captura del div "html-pdf" que está dentro del div oculto "pdf" ...

Espero que les sirvas

Escribí esto en español y está traducido, de Chile;

Creo que la forma correcta de hacer el trabajo es usar la propiedad onclone , https://stackoverflow.com/a/51049443/2251303