Html2canvas: Leere Leinwand beim Abrufen von Element nach ID

Erstellt am 28. Sept. 2020 · 3Kommentare · Quelle: niklasvh/html2canvas

Ist es möglich, getElementByID zu verwenden, um nur ein bestimmtes Element auf die Leinwand zu drucken?

Wenn Sie die neueste Version verwenden, funktioniert es nur mit 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)
        });
    });

Quelle

Josh10101010

👀1 👍1

Hilfreichster Kommentar

Möglicherweise wird Ihr Element nach oben oder unten gescrollt. Versuchen Sie es, indem Sie scrollX: -window.scrollX und scrollY: -window.scrollY hinzufügen

    $("#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 am 1. Okt. 2020

👍2 🚀1 ❤1 🎉1

Alle 3 Kommentare

Möglicherweise wird Ihr Element nach oben oder unten gescrollt. Versuchen Sie es, indem Sie scrollX: -window.scrollX und scrollY: -window.scrollY hinzufügen

    $("#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 am 1. Okt. 2020

👍2 🚀1 ❤1 🎉1

Perfekt, damit ist das Problem gelöst, danke.

Josh10101010 am 1. Okt. 2020

❤1

Bitte bitte bitte schreiben Sie diese beiden Eigenschaften zu den Hauptbeispielen entsprechend, um beim Screenshoten oft zu scrollen. Siehe Kommentar oben https://github.com/niklasvh/html2canvas/issues/2368#issuecomment -701920277

scrollX: -window.scrollX,
scrollY: -window.scrollY

IgorKurkov am 4. Dez. 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Html2canvas: Leere Leinwand beim Abrufen von Element nach ID

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen