HTML2Canvas rendert kein vollständiges div, nur was auf dem Bildschirm sichtbar ist?

Lesezeit: 5 Minuten

Benutzeravatar von L84
L84

Ich versuche zu verwenden HTML2Canvas den Inhalt eines div wiedergeben Hier ist der Code:

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

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

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

});

Ich verwende v5 beta 3.

Wenn dieser Code ausgeführt wird, wird nur das gerendert, was auf dem Bildschirm sichtbar ist. Die #potenzial-page div ist im Wesentlichen die gesamte Seite, abzüglich der Kopf- und Fußzeile. Der gesamte Inhalt in diesem Div ist durch Scrollen sichtbar (es gibt einige versteckte Elemente, aber ich möchte nicht, dass die versteckten Elemente im Bild sichtbar sind.)

Ich kann nicht finden, was falsch ist oder warum es nicht das gesamte div speichert. Ich sollte auch beachten, dass das Bild anscheinend so groß wie das div ist, aber nur teilweise sichtbar ist.

Um ein Beispiel zu geben, was ich meine, hier ein Vergleich:

Geben Sie hier die Bildbeschreibung ein

Links ist, wie HTML2Canvas das div rendern soll. Die rechte Seite zeigt, wie es gerendert wird, wenn es den obigen Code ausführt. Das rechte Bild ist das, was auf meinem Browser-Bildschirm zu sehen ist.

Ich habe versucht, das hinzuzufügen height Option, aber es macht keinen Unterschied.

AKTUALISIEREN

Wenn ich auf der Seite ganz nach oben scrolle dann Führen Sie das Skript aus, es wird das gesamte div so darstellen, wie es sollte.

Wie rendere ich das div, ohne nach oben scrollen zu müssen?

  • Haben Sie diese Lösung in SO gesehen: „Html2canvas konvertiert übergelaufenen Inhalt in ein Bild“

    – Devernay Stéphane

    25. März 2016 um 3:42 Uhr


  • Ich stehe vor dem gleichen Problem, wie hast du das gelöst?

    – Rishi Jagati

    15. August 2017 um 12:26 Uhr

  • Dieses Problem ist gelöst: github.com/niklasvh/html2canvas/issues/…

    – zerbene

    7. Mai 2021 um 17:36 Uhr

Ich hoffe, sie helfen dir

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

  • Die einzige Antwort, die für mich funktioniert hat. (In meinem speziellen Fall ist die Karte nur teilweise außerhalb des Bildschirms und nur vertikal.)

    – devuxer

    27. April 2020 um 23:02 Uhr

  • Danke dafür! Ich hatte eine Schaltfläche am unteren Rand einer Seite, die einige Inhalte weit darüber in ein Bild umwandelt. Das war der Schlüssel!

    – Gurnzbot

    19. Februar 2021 um 3:38 Uhr

  • Gut gemacht. das hat mir wirklich geholfen

    – A.Dumas

    6. April 2021 um 9:07 Uhr

Eine Lösung, die für mich funktionierte, bestand darin, meinem CSS Folgendes hinzuzufügen:

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

Es verhindert, dass html2canvas das Rendering auf den sichtbaren Bereich beschränkt (was der Standard zu sein scheint).

Siehe hier: https://github.com/niklasvh/html2canvas/issues/117

  • Du hast meinen Tag gerettet.

    – Omi

    5. Dezember 2017 um 22:13 Uhr

  • Das ist die beste Lösung!

    – Adam

    18. Januar 2022 um 15:14 Uhr

Benutzeravatar von Amit Anand
Amit Anand

ich benutzte window.scrollTo()in meinem Fall und es hat bei mir funktioniert.

Nachfolgend finden Sie einen Beispielcode

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

  • Das war eine tolle und schnelle Lösung für mich. Falls es Ihnen egal ist, nach oben zu scrollen, funktioniert dies.

    – Andy

    14. Juli 2019 um 17:08 Uhr

  • Danke dafür! Hat super funktioniert

    – Mike Mond

    10. Juli 2020 um 23:44 Uhr

Sie können die Bildlaufposition als Variable in html2canvas hinzufügen, wodurch die Notwendigkeit entfällt, die Seite zu scrollen.

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

Ich habe gerade so etwas gemacht und es hat bei mir funktioniert:

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

  • Wenn Sie ein scrollbares DIV haben, verwenden Sie height: $('#wrapper')[0].scrollHeight, windowHeight: $('#wrapper')[0].scrollHeight, um die richtigen Maße zu bekommen.

    – Benutzerbild

    27. November 2022 um 16:07 Uhr

  • Dies nimmt nicht einmal die volle Höhe ein, meine Containerhöhe beträgt 7000, aber es werden nur wenige Daten von 24 Listenelementen angezeigt, von denen ich nur 14 sehen kann

    – Jagannath Swarnkar

    1. Dezember 2022 um 13:04 Uhr

  • @JagannathSwarnkar Versuchen Sie zu sehen, ob der Inhalt tatsächlich in seinem gesamten Körper geladen wurde, bevor Sie den obigen Befehl ausführen, ob er nur beim Scrollen geladen wird usw. … wenn die Daten vorhanden sind – er sollte die gesamte Seite einnehmen

    – Ricky Levi

    2. Dezember 2022 um 13:21 Uhr

Benutzeravatar von NSP
NSP

Geben Sie hier die Bildbeschreibung ein

Wenn Sie eine Höhe für das div festgelegt haben, das Sie in eine Leinwand verwandeln möchten, müssen Sie diese entfernen, bevor Sie den Schnappschuss tatsächlich aufnehmen. Andernfalls wird es wegen dieser Höhe einfach abgeschnitten.

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

Dann werden Sie feststellen, dass das Scrollen nach unten Ihr Dokument immer noch ausschneidet. Mach einfach ein:

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

bevor Sie den Schnappschuss machen.

  • Wenn Sie ein scrollbares DIV haben, verwenden Sie height: $('#wrapper')[0].scrollHeight, windowHeight: $('#wrapper')[0].scrollHeight, um die richtigen Maße zu bekommen.

    – Benutzerbild

    27. November 2022 um 16:07 Uhr

  • Dies nimmt nicht einmal die volle Höhe ein, meine Containerhöhe beträgt 7000, aber es werden nur wenige Daten von 24 Listenelementen angezeigt, von denen ich nur 14 sehen kann

    – Jagannath Swarnkar

    1. Dezember 2022 um 13:04 Uhr

  • @JagannathSwarnkar Versuchen Sie zu sehen, ob der Inhalt tatsächlich in seinem gesamten Körper geladen wurde, bevor Sie den obigen Befehl ausführen, ob er nur beim Scrollen geladen wird usw. … wenn die Daten vorhanden sind – er sollte die gesamte Seite einnehmen

    – Ricky Levi

    2. Dezember 2022 um 13:21 Uhr

Benutzeravatar von Mayur Shah
Mayur Schah

So habe ich es in Reactjs erreicht.

Hauptproblem waren Verhältnis und Skala
Wenn Sie schnell tun window.devicePixelRatioder Standardwert ist 2, was das Halbbildproblem verursacht hat.

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.
  });
}

1438480cookie-checkHTML2Canvas rendert kein vollständiges div, nur was auf dem Bildschirm sichtbar ist?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy