html2canvas / динамически добавленный DOM-элемент не перехватывается - PullRequest
Новая
       7

html2canvas / динамически добавленный DOM-элемент не перехватывается

0 голосов
/ 22 октября 2019

Я должен использовать IE11. Мне нужен скриншот веб-сайта, который динамически создается. Я хотел бы использовать html2canvas, но html2canvas не будет ловить DOM-элемент. Статические элементы будут пойманы. 

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="utf-8" />
 <title>Screenshot Test</title>
 <script src="Archiv/jquery-3.3.1.min.js"></script> 
 <script src="html2canvas.min.js"></script> 
 <style>
    h1 {
        color: blue;
        font-family: arial;
    } 
</style>

</head>
<body>
    <div id="theDynamicScreen">
        <h1>Headline</h1>
    </div>
    <button id="shotTheScreen">shot the screen</button> 

    <script>
        function initializingNewTextElement(idOfNewElement, knot)
            {
            /** put new element in DOM **/
            const newElement = document.createElement("p");
            newElement.setAttribute("id",idOfNewElement);
            newElement.innerHTML ="this is a new text";
            $("#"+knot)[0].appendChild(newElement);
            /** define new css **/
            const cssSheet = document.styleSheets[0];
            const newRule = "#" + idOfNewElement + "{ font-family: arial; font-size: 2rem; width: 20rem; color: red; background-color: lightblue; }";
            cssSheet.insertRule(newRule,1);
            }

        function makeAScreenshot(elementName) 
            {
            let screenshotCollection = [];
            let htmlObjectInDOM = $("#" + elementName)[0];
            html2canvas(htmlObjectInDOM).then(function(canvas) {
                    document.body.appendChild(canvas);
                    let screenGespeichert = canvas.toDataURL('image/png');
                    screenshotCollection.push(screenGespeichert);
                });
            }

        const aAddedElement = "newText";
        initializingNewTextElement(aAddedElement,"theDynamicScreen");

        $("#shotTheScreen").click(function(){makeAScreenshot(aAddedElement)});

    </script>   

</body>

В чем мое неправильное понимание html2canvas?

...