Html2canvas: Blank canvas when getting element by ID

Created on 28 Sep 2020  ·  3Comments  ·  Source: niklasvh/html2canvas

Is it possible to use getElementByID to only print a specific element to canvas?

Using the latest version and it will only work with 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

Most helpful comment

Maybe your element is scrolled up or down. Try by adding scrollX: -window.scrollX and 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 on 1 Oct 2020
👍2 🚀1 ❤1 🎉1

All 3 comments

Maybe your element is scrolled up or down. Try by adding scrollX: -window.scrollX and 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 on 1 Oct 2020
👍2 🚀1 ❤1 🎉1

Perfect, that's solved the issue thanks.

Josh10101010 picture Josh10101010 on 1 Oct 2020
❤1

Please please please write these two properties to the main examples according to often scrolling while screenshotting. See comment above https://github.com/niklasvh/html2canvas/issues/2368#issuecomment-701920277

scrollX: -window.scrollX,
scrollY: -window.scrollY
IgorKurkov picture IgorKurkov on 4 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

diego-rey picture diego-rey  ·  3Comments
tjchambers32 picture tjchambers32  ·  3Comments
Juliazhong picture Juliazhong  ·  4Comments
dking3876 picture dking3876  ·  4Comments
wbarrantes picture wbarrantes  ·  3Comments