Html2canvas: enregistrement d'un élément qui s'étend au-delà de la fenêtre

Créé le 3 nov. 2017  ·  4Commentaires  ·  Source: niklasvh/html2canvas

J'essaie de l'utiliser pour enregistrer une page qui s'étend au-delà de la fenêtre d'affichage, mais qui continue d'être coupée. Existe-t-il un moyen de sauvegarder . ci-dessous est le code que j'utilise. lorsque je rends l'élément suffisamment petit pour tenir dans la fenêtre, cela fonctionne très bien, mais l'image que j'obtiens est juste trop petite pour ce dont j'ai besoin, et l'augmentation de la taille ne fait que rendre floue. Certaines de ces images dans la taille dont j'ai besoin font 1300px + de haut

`html2canvas(aperçu, {
fond : '#ffffff',
rendu : (canvas)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`
picture dking3876

Commentaire le plus utile

Vous pouvez essayer de cloner le contenu de l'élément et de l'ajouter au corps juste pendant la capture, puis de le supprimer. Quelque chose comme

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });
picture ffflabs le 8 nov. 2017
👍3

Tous les 4 commentaires

Si l'élément contenu dans un conteneur, div, modal, etc. a un défilement intérieur ?

ffflabs picture ffflabs le 4 nov. 2017

Le conteneur direct que je veux capturer n'a pas de défilement, mais le conteneur parent en a. Je vais essayer de mettre le défilement sur le conteneur direct et voir si cela fonctionne

dking3876 picture dking3876 le 6 nov. 2017

Pas bien. J'ai ajusté pour que le conteneur im capture défile pour afficher le dom complet, et il est toujours coupé dans la section visible de l'écran.

d'autres pensées ??

dking3876 picture dking3876 le 7 nov. 2017

Vous pouvez essayer de cloner le contenu de l'élément et de l'ajouter au corps juste pendant la capture, puis de le supprimer. Quelque chose comme

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });
ffflabs picture ffflabs le 8 nov. 2017
👍3
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

AviYafe picture AviYafe  ·  5Commentaires
anthonymejia picture anthonymejia  ·  4Commentaires
AlphaDu picture AlphaDu  ·  4Commentaires
Juliazhong picture Juliazhong  ·  4Commentaires
koreanman picture koreanman  ·  4Commentaires