<p>promesse html2canvas renvoyée avant la fin du rendu</p>

Créé le 1 oct. 2019 · 3Commentaires · Source: niklasvh/html2canvas

Veuillez vous assurer que vous testez avec la dernière version de html2canvas .
Les anciennes versions ne sont pas prises en charge et les problèmes signalés pour celles-ci seront résolus.

Veuillez d'abord suivre les étapes générales de dépannage :

[X] Vous utilisez la dernière version
[X] Vous testez en utilisant la version non-minifiée de html2canvas et avez vérifié tous les problèmes potentiels signalés dans la console

Rapports de bogues :

J'ai une page avec plusieurs divs. Chacun de ces div a plusieurs éléments de table de réaction . Je veux faire une capture d'écran de chaque div, puis créer un fichier zip et les télécharger tous en même temps (comme une sorte de pseudo diaporama powerpoint). Cela fonctionne parfaitement sur Mac, cependant lorsque j'utilise Google Chrome sur Windows, les divs avec plusieurs tables de réaction semblent ne pas terminer le rendu lorsque la capture d'écran est prise. J'ai confirmé en activant la journalisation que le rendu se termine en ~1000ms, mais le canvas que html2canvas renvoie apparaît comme s'il n'avait pas terminé le rendu. Les tables de réaction sont rendues, mais le reste du texte sur la page est quelque peu transparent, comme si le chargement était à mi-chemin.

Je n'ai pas encore de repro jsfiddle, mais je vais travailler dessus pour en ajouter un ici.

Caractéristiques:

version html2canvas testée avec :
Navigateur et version : dernier Chrome - 77.0.3865.90
Système d'exploitation : Windows (important, ne peut pas se reproduire sur un Mac)

Source

tjchambers32

👍6

Commentaire le plus utile

J'ai également rencontré ce problème et cela a causé un assez mauvais bug de notre côté. Aimeriez-vous fixé!

gregroyal le 12 nov. 2019

👍5

Tous les 3 commentaires

J'ai réussi à le faire fonctionner, même si ce n'est pas optimal.

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

Je suis arrivé au délai d'attente de 400 ms par essais et erreurs. Rien de moins, et j'ai observé le problème avec le div n'étant pas complètement rendu lorsque html2canvas prend la capture d'écran.

tjchambers32 le 2 oct. 2019

🚀2

Je suis d'accord, j'ai eu un problème très similaire, où les images générées par Html2Canvas étaient coupées. Cela ne s'est produit que dans les versions de production. Dans les environnements de développement, cela a bien fonctionné. La solution de contournement ci-dessus résout mon problème. Je suis d'accord pour dire que ce n'est pas idéal et qu'une solution appropriée est nécessaire pour cela, mais pour l'instant, cela résout mon problème. Merci @ tjchambers32 pour cette