web-dev-qa-db-fra.com

HTML2Canvas ne rend pas full div, mais seulement ce qui est visible à l'écran?

J'essaie d'utiliser HTML2Canvas pour rendre le contenu d'un div. Voici le code: 

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

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

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

});

J'utilise v5 beta 3. 

Lorsque ce code est exécuté, il ne rend que ce qui est visible à l'écran. Le #potenzial-page div est essentiellement la page entière, moins l'en-tête et le pied de page. Tout le contenu de cette div est visible par défilement (il y a quelques éléments cachés, mais je ne veux pas que les éléments cachés soient visibles dans l'image.) 

Je ne peux pas trouver ce qui ne va pas ou pourquoi cela ne sauvera pas toute la div. Je devrais également noter qu'il apparaît que l'image est aussi haute que la div mais que partiellement visible. 

Pour donner un exemple de ce que je veux dire, voici une comparaison: 

 enter image description here

La gauche indique comment HTML2Canvas doit rendre la div. La droite montre comment il est rendu lorsqu'il exécute le code ci-dessus. La bonne image est ce qui est visible dans l'écran de mon navigateur.

J'ai essayé d'ajouter l'option height mais cela ne change rien.

UPDATE

Si je fais défiler jusqu'en haut de la page , alors exécuter le script, il rendra la div entière comme il se doit. 

Comment puis-je rendre la div sans avoir à faire défiler vers le haut?

javascripthtml2canvas
11
L84

Une solution qui a fonctionné pour moi a été d’ajouter ce qui suit à mon css:

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

Cela empêche html2canvas de limiter le rendu à la zone visible (ce qui semble être la valeur par défaut).

Voir ici: https://github.com/niklasvh/html2canvas/issues/117

18
Jean-Baptiste Martin

Avez-vous vu cette solution dans SO: " Html2canvas convertissant le contenu débordé en image " Une solution de contournement est proposée avec le débordement de visible, puis le rendu et le débordement masqués.

1
Devernay Stéphane

J'ai utilisé window.scrollTo()in mon cas et cela a fonctionné pour moi.

Ci-dessous un exemple de code

$('#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);
});
0
Amit Anand