<p>html2canvas-Versprechen zurückgegeben, bevor das Rendern abgeschlossen ist</p>

Erstellt am 1. Okt. 2019 · 3Kommentare · Quelle: niklasvh/html2canvas

Bitte stellen Sie sicher, dass Sie mit der neuesten Version von html2canvas testen .
Alte Versionen werden nicht unterstützt und für sie gemeldete Probleme werden geschlossen.

Bitte befolgen Sie zuerst die allgemeinen Schritte zur Fehlerbehebung:

[X] Sie verwenden die neueste Version
[X] Sie testen mit der nicht-minifizierten Version von html2canvas und haben alle in der Konsole gemeldeten potenziellen Probleme überprüft

Fehlerberichte:

Ich habe eine Seite mit mehreren Divs. Jedes dieser Divs hat mehrere React-Table- Elemente. Ich möchte einen Screenshot von jedem Div machen und dann eine ZIP-Datei erstellen und alle auf einmal herunterladen (als eine Art Pseudo-Powerpoint-Foliendeck). Dies funktioniert perfekt auf dem Mac, aber wenn ich Google Chrome unter Windows verwende, scheinen die Divs mit mehreren Reaktionstabellen das Rendern nicht abzuschließen, wenn der Screenshot aufgenommen wird. Ich habe durch Aktivieren der Protokollierung bestätigt, dass das Rendern in ~1000ms abgeschlossen ist, aber das canvas , das html2canvas zurückgibt, sieht so aus, als ob das Rendern nicht abgeschlossen wäre. Die React-Tables werden gerendert, aber der Rest des Textes auf der Seite ist etwas transparent, als wäre er halb fertig geladen.

Ich habe noch kein jsfiddle-Repro, aber ich werde daran arbeiten, um hier eines hinzuzufügen.

Spezifikationen:

html2canvas-Version getestet mit:
Browser & Version: neuestes Chrome - 77.0.3865.90
Betriebssystem: Windows (wichtig, kann auf einem Mac nicht reproduziert werden)

Quelle

tjchambers32

👍6

Hilfreichster Kommentar

Ich bin auch auf dieses Problem gestoßen und es hat einen ziemlich schlimmen Fehler auf unserer Seite verursacht. Möchte behoben werden!

gregroyal am 12. Nov. 2019

👍5

Alle 3 Kommentare

Ich habe es geschafft, dies zum Laufen zu bringen, obwohl es nicht optimal ist.

html2canvas(div, {
    letterRendering: true,
    onclone: (doc) => {
        // onclone logic to resize div

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 400)
        })
    }
}).then((obj) => {
    let img = obj.toDataURL()
    // save image to zip file
})

Ich bin durch Versuch und Irrtum zum 400-ms-Timeout gekommen. Alles andere, und ich habe das Problem beobachtet, dass das div nicht vollständig gerendert wurde, wenn html2canvas den Screenshot aufnimmt.

tjchambers32 am 2. Okt. 2019

🚀2

Ich stimme zu, ich hatte ein sehr ähnliches Problem, bei dem von Html2Canvas generierte Bilder abgeschnitten wurden. Dies geschah nur in Produktionsversionen. In Entwicklungsumgebungen hat es gut funktioniert. Die obige Problemumgehung behebt mein Problem. Ich stimme zu, dass es nicht ideal ist und dafür eine richtige Lösung benötigt wird, aber im Moment löst es mein Problem. Danke @tjchambers32 für diese

andre-engelbrecht am 24. Okt. 2019

👀1