Html2canvas: Tela em branco ao obter elemento por ID

Criado em 28 set. 2020  ·  3Comentários  ·  Fonte: niklasvh/html2canvas

É possível usar getElementByID para imprimir apenas um elemento específico na tela?

Usando a versão mais recente e só funcionará com 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

Comentários muito úteis

Talvez seu elemento esteja rolado para cima ou para baixo. Tente adicionando scrollX: -window.scrollX e 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 em 1 out. 2020
👍2 🚀1 ❤1 🎉1

Todos 3 comentários

Talvez seu elemento esteja rolado para cima ou para baixo. Tente adicionando scrollX: -window.scrollX e 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 em 1 out. 2020
👍2 🚀1 ❤1 🎉1

Perfeito, resolveu o problema obrigado.

Josh10101010 picture Josh10101010 em 1 out. 2020
❤1

Por favor, escreva essas duas propriedades nos exemplos principais de acordo com a rolagem frequente durante a captura de tela. Veja o comentário acima https://github.com/niklasvh/html2canvas/issues/2368#issuecomment -701920277

scrollX: -window.scrollX,
scrollY: -window.scrollY
IgorKurkov picture IgorKurkov em 4 dez. 2020
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

tjchambers32 picture tjchambers32  ·  3Comentários
tibewww picture tibewww  ·  4Comentários
yasergh picture yasergh  ·  5Comentários
dking3876 picture dking3876  ·  4Comentários
deepender87 picture deepender87  ·  4Comentários