Html2canvas: Toile vierge lors de l'obtention d'un élément par ID

Créé le 28 sept. 2020  ·  3Commentaires  ·  Source: niklasvh/html2canvas

Est-il possible d'utiliser getElementByID pour n'imprimer qu'un élément spécifique sur le canevas ?

En utilisant la dernière version et cela ne fonctionnera qu'avec document.body

    $("#myButton").click(function () {
        html2canvas(document.getElementById('myTable'), {
            allowTaint: true,
            imageTimeout: 15000,
            logging: true,
            useCORS: true
        }).then(function (canvas) {
            document.body.appendChild(canvas);
            const b64 = canvas.toDataURL("image/png").replace(/.*,/, '');
            console.log("data:image/png;base64, " + b64)
        });
    });
picture Josh10101010
👀1 👍1

Commentaire le plus utile

Peut-être que votre élément défile vers le haut ou vers le bas. Essayez en ajoutant scrollX : -window.scrollX et scrollY : -window.scrollY

    $("#myButton").click(function () {
        html2canvas(document.getElementById('myTable'), {
            allowTaint: true,
            imageTimeout: 15000,
            logging: true,
            useCORS: true,
                        scrollX: -window.scrollX,
                        scrollY: -window.scrollY
        }).then(function (canvas) {
            document.body.appendChild(canvas);
            const b64 = canvas.toDataURL("image/png").replace(/.*,/, '');
            console.log("data:image/png;base64, " + b64)
        });
    });
picture NurulAlomAdor le 1 oct. 2020
👍2 🚀1 ❤1 🎉1

Tous les 3 commentaires

Peut-être que votre élément défile vers le haut ou vers le bas. Essayez en ajoutant scrollX : -window.scrollX et scrollY : -window.scrollY

    $("#myButton").click(function () {
        html2canvas(document.getElementById('myTable'), {
            allowTaint: true,
            imageTimeout: 15000,
            logging: true,
            useCORS: true,
                        scrollX: -window.scrollX,
                        scrollY: -window.scrollY
        }).then(function (canvas) {
            document.body.appendChild(canvas);
            const b64 = canvas.toDataURL("image/png").replace(/.*,/, '');
            console.log("data:image/png;base64, " + b64)
        });
    });
NurulAlomAdor picture NurulAlomAdor le 1 oct. 2020
👍2 🚀1 ❤1 🎉1

Parfait, c'est résolu le problème merci.

Josh10101010 picture Josh10101010 le 1 oct. 2020
❤1

S'il vous plaît s'il vous plaît écrivez ces deux propriétés aux exemples principaux en faisant souvent défiler lors de la capture d'écran. Voir le commentaire ci-dessus https://github.com/niklasvh/html2canvas/issues/2368#issuecomment -701920277

scrollX: -window.scrollX,
scrollY: -window.scrollY
IgorKurkov picture IgorKurkov le 4 déc. 2020
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

AlphaDu picture AlphaDu  ·  4Commentaires
celik75 picture celik75  ·  4Commentaires
AviYafe picture AviYafe  ·  5Commentaires
wbarrantes picture wbarrantes  ·  3Commentaires
bishwapoudel picture bishwapoudel  ·  4Commentaires