Html2canvas: Inhalte von divs mit "display:none" können nicht abgerufen werden

Erstellt am 6. März 2016 · 10Kommentare · Quelle: niklasvh/html2canvas

Hallo, ich möchte einen Screenshot von einem versteckten Div machen

das ist der Code den ich probiert habe
HTML-Code:

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS:

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

Fehler im Browser:
**

Nicht abgefangener TypeError: Eigenschaft 'length' von nullhtml2canvas @ html2canvas.js:941(anonyme Funktion) @ HtmlPage kann nicht gelesen werden. html:13

**
Meine Geige : https://jsfiddle.net/h39tp0Ly/2/

Bitte helft mir dabei

Quelle

Spartan-Arun

Hilfreichster Kommentar

Hallo, ich arbeite mit Angular 6 und "html2canvas", um ein PDF mit "jsPdf" zu erstellen .... Ich wollte einen Screenshot zu einem versteckten Div machen und konnte es nicht tun, bis ich es ERREICHTE

die Erfassung erfolgt in das div mit der ID "html-pdf"

"HTML"
` Studentenausweis /a>

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

/div
/div`

"js oder in Angular ist Typescript"
`herunterladen2 () {
var imgcab: Zeichenfolge;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {scale:2}). Dann (Funktion (Leinwand) {

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

var doc = neues jsPDF ({
Ausrichtung: 'p',
Einheit: 'mm',
Format: 'Brief',
});

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

Und das Wichtigste ist, das div innerhalb des Bildschirms zu verstecken.

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

Der Code erstellt ein PDF mit der Erfassung des div "html-pdf", das sich im versteckten div "pdf" befindet ...

Ich hoffe du dienst ihnen

Ich habe dies auf Spanisch geschrieben und es ist aus Chile übersetzt;

kuraudeo am 27. Juli 2018

👍14 ❤11

Alle 10 Kommentare

Html2canvas interpretiert den Stil display:none korrekt und rendert daher kein verstecktes Element. Um das zu erreichen, was Sie wollen, können Sie ein sichtbares Element absolut außerhalb des Seiten-Ansichtsfensters positionieren (wenn Sie "ein verstecktes Element rendern" möchten).

herringtown am 11. März 2016

Könnte nützlich sein.
Danke !

atefBB am 27. Sept. 2016

Es funktioniert nur, wenn das Div CSS hat, das nicht " display:none " ist. Also habe ich die Kombination .show() und .hide() verwendet, um das Element sichtbar und versteckt zu machen, um Canvas zu bilden

Spartan-Arun am 4. Jan. 2017

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

Ich habe einige Informationen im Internet gefunden. Wir können CSS mit " display:none " auf das angegebene div setzen und dann die Option onclone wie oben hinzufügen. Bitte fügen Sie die Option "loggin: true" hinzu, um zu sehen, was passiert

karsondang am 23. Jan. 2017

Tatsächlich funktioniert der Trick, den Container mit absoluten Positionswerten und negativen Werten oben/links aus einem Ansichtsfenster zu entfernen, in Firefox nicht, er löst die NS_ERROR_FAILURE-Ausnahme aus

Es funktioniert jedoch in Chrome

nettiopsu am 14. Feb. 2018

Ich bin vor kurzem auf dieses Problem gestoßen, und wenn Sie möchten, dass ein bestimmtes div unsichtbar ist und ein Screenshot erstellt wird, setzen Sie die CSS-Eigenschaften auf

height: 0%
overflow:hidden

kchen1025 am 7. Juni 2018

😕5 👎2 👍2

Das funktioniert bei mir nicht @kchen1025

chidiwilliams am 14. Juli 2018

Am Ende habe ich das Canvas direkt nach dem Ziel-Div generiert und das Div sofort nach dem Laden des Canvas ausgeblendet. Das Flimmern ist kaum wahrnehmbar.

Mein Code sieht so aus:

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

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