Html2canvas: Impossible d'obtenir le contenu des div avec " display: none "

Html2canvas interprète correctement le style display:none et ne rendra donc pas un élément caché. Pour accomplir ce que vous voulez, vous pouvez absolument positionner un élément visible hors de la fenêtre de la page (si le désir est de "rendre un élément caché").

Peut être utile.
Merci !

Cela fonctionne si et seulement si le div a un css qui n'est pas " display:none ". j'ai donc utilisé la combinaison .show() et .hide() pour rendre l'élément visible et caché pour former Canvas

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

J'ai trouvé des infos sur Internet. Nous pouvons définir css sur la div spécifiée avec " display:none " puis ajouter l'option onclone comme ci-dessus. Veuillez ajouter l'option "loggin: true" pour voir ce qui se passe

En fait, l'astuce consistant à mettre le conteneur hors d'une fenêtre avec une position absolue et des valeurs négatives en haut/à gauche - ne fonctionne pas dans Firefox, elle lève l'exception NS_ERROR_FAILURE

Cela fonctionne cependant dans Chrome

J'ai rencontré ce problème très récemment, et si vous voulez qu'un div particulier soit invisible et fasse une capture d'écran, définissez les propriétés css comme

height: 0%
overflow:hidden

Cela ne fonctionne pas pour moi @kchen1025

J'ai fini par générer le canevas immédiatement après le div cible, puis par masquer le div immédiatement après le chargement du canevas. Le scintillement est à peine perceptible.

Mon code ressemble à ceci :

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

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

Bonjour, je travaille avec Angular 6 et "html2canvas" pour créer un PDF avec "jsPdf" .... Je voulais faire une capture d'écran dans un div caché et je ne pouvais pas le faire avant de l'avoir atteint

la capture se fait vers le div avec l'id "html-pdf"

"HTML"
` Carte d'étudiant /a>

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

/div
/div`

"js ou en angulaire est Typescript"
`télécharger2 () {
var imgcab : chaîne ;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {scale:2}). Alors (fonction (canevas) {

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

var doc = nouveau jsPDF ({
orientation : 'p',
unité : 'mm',
format : 'lettre',
});

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

Et la chose la plus importante pour cacher le div à l'intérieur de l'écran.

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

le code crée un pdf avec la capture du div "html-pdf" qui se trouve à l'intérieur du div caché "pdf"...

j'espère que vous les servez

J'ai écrit ceci en espagnol et c'est traduit, du Chili ;

Je pense que la bonne façon de faire le travail est d'utiliser la propriété onclone , https://stackoverflow.com/a/51049443/2251303