HTML2Canvas rendert kein vollständiges div, nur was auf dem Bildschirm sichtbar ist?
Lesezeit: 5 Minuten
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:
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?
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:
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
NSP
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.
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
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.
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