Html2canvas: Lienzo en blanco al obtener un elemento por ID

Creado en 28 sept. 2020  ·  3Comentarios  ·  Fuente: niklasvh/html2canvas

¿Es posible usar getElementByID para imprimir solo un elemento específico en el lienzo?

Usando la última versión y solo funcionará con 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

Comentario más útil

Tal vez su elemento esté desplazado hacia arriba o hacia abajo. Pruebe agregando scrollX: -window.scrollX y 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 en 1 oct. 2020
👍2 🚀1 ❤1 🎉1

Todos 3 comentarios

Tal vez su elemento esté desplazado hacia arriba o hacia abajo. Pruebe agregando scrollX: -window.scrollX y 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 en 1 oct. 2020
👍2 🚀1 ❤1 🎉1

Perfecto, eso solucionó el problema gracias.

Josh10101010 picture Josh10101010 en 1 oct. 2020
❤1

Por favor, escriba estas dos propiedades en los ejemplos principales de acuerdo con el desplazamiento frecuente durante la captura de pantalla. Ver comentario arriba https://github.com/niklasvh/html2canvas/issues/2368#issuecomment -701920277

scrollX: -window.scrollX,
scrollY: -window.scrollY
IgorKurkov picture IgorKurkov en 4 dic. 2020
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

AlphaDu picture AlphaDu  ·  4Comentarios
AviYafe picture AviYafe  ·  5Comentarios
rrutkows picture rrutkows  ·  4Comentarios
deepender87 picture deepender87  ·  4Comentarios
kunal886496 picture kunal886496  ·  3Comentarios