Html2canvas: IDで要素を取得するときに空白のキャンバス

作成日 2020年09月28日 · 3コメント · ソース: niklasvh/html2canvas

getElementByIDを使用して、特定の要素のみをキャンバスに印刷することは可能ですか？

最新バージョンを使用すると、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)
        });
    });

ソース

Josh10101010

👀1 👍1

最も参考になるコメント

たぶんあなたの要素は上下にスクロールされます。 scrollX：-window.scrollXと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 2020年10月01日

👍2 🚀1 ❤1 🎉1

全てのコメント3件

たぶんあなたの要素は上下にスクロールされます。 scrollX：-window.scrollXと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 2020年10月01日

👍2 🚀1 ❤1 🎉1

完璧です、それは問題のおかげで解決しました。

Josh10101010 2020年10月01日

❤1

スクリーンショット中に頻繁にスクロールするので、これら2つのプロパティをメインの例に書き込んでください。上記のコメントを参照してくださいhttps://github.com/niklasvh/html2canvas/issues/2368#issuecomment-701920277

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

IgorKurkov 2020年12月04日

このページは役に立ちましたか？

0 / 5 - 0 評価

Html2canvas: IDで要素を取得するときに空白のキャンバス

最も参考になるコメント

全てのコメント3件

関連する問題