Почему html2canvas не экспортирует мое JavaScript рабочее пространство? - PullRequest
Новая
       7

Почему html2canvas не экспортирует мое JavaScript рабочее пространство?

0 голосов
/ 12 февраля 2020

Я создаю рабочее пространство, в котором вы можете настроить div с помощью javascript по ширине, левому краю и высоте. Но всякий раз, когда я пытаюсь экспортировать основной идентификатор (рабочее пространство для пользователя). html2canvas не обнаруживает его содержимое. Я могу конвертировать div с параметром с помощью html2canvas. Но не основной идентификатор, который мне нужно конвертировать? Кто-нибудь может мне помочь? Это потому, что я настраиваю div с помощью Javascript? Я положил код ниже. Заранее спасибо!

Я поместил функцию html2canvas внизу страницы HTML, чтобы сделать ее более понятной. Файл JavaScript просто заполнен параметрами моего интерфейса.

Код, о котором я говорю, не работает: 

<script>
    html2canvas(document.querySelector("#main")).then(canvas => {
        document.body.appendChild(canvas)
    });
</script>


document.onclick = function(){
      //Breedte vlak 1
      var vlak2Left = -5;
      var vlak3Left = 68;
      var vlak4Left = 55;

      //Hoogtes
      var sliderValue2 = document.getElementById("hoogte1").value;
      var sliderValue6 = document.getElementById("hoogte4").value;
      var sliderValue8 = document.getElementById("hoogteCanvas").value;
      var sliderValue10 = document.getElementById("hoogte23").value;



      //Breedtes
      var sliderValue1 = document.getElementById("breedte1").value;
      var sliderValue3 = document.getElementById("breedte2").value;
      var sliderValue4 = document.getElementById("breedte3").value;
      var sliderValue7 = document.getElementById("breedte4").value;
      var sliderValue9 = document.getElementById("breedteCanvas").value;



      //X-meter
      var sliderValue5 = document.getElementById("xmeter3").value;

      var vlak2Total = Number(vlak2Left)+Number(sliderValue1);
      var vlak3Total = Number(vlak3Left)+Number(sliderValue1)+Number(sliderValue3)-Number(sliderValue5);
      var vlak4Total = Number(vlak4Left)+Number(sliderValue1)+Number(sliderValue3)+Number(sliderValue4)-Number(sliderValue5);

       document.getElementById("VLAK1").style.width = sliderValue1 + "px";
       document.getElementById("VLAK2").style.left = vlak2Total + "px";
       document.getElementById("VLAK3").style.left = vlak3Total + "px";
       document.getElementById("VLAK4").style.left = vlak4Total + "px";

      //Hoogte vlak 1
      document.getElementById("VLAK1").style.height = sliderValue2 + "px";

      //Breedte vlak 2
      document.getElementById("VLAK2").style.width = sliderValue3 + "px";
      document.getElementById("VLAK3").style.left = vlak3Total + "px";

      //Hoogte vlak 2+3
      document.getElementById("VLAK2").style.height = sliderValue10 + "px";
      document.getElementById("VLAK3").style.height = sliderValue10 + "px";


      //Breedte vlak 3
      document.getElementById("VLAK3").style.width = sliderValue4 + "px";
      document.getElementById("VLAK4").style.left = vlak4Total + "px";

      //X-meter vlak 3
      document.getElementById("VLAK3").style.right = sliderValue5 + "px";

      //Hoogte vlak 4
      document.getElementById("VLAK4").style.height = sliderValue6 + "px";

      //Breedte vlak 4
      document.getElementById("VLAK4").style.width = sliderValue7 + "px";

      //Hoogte canvas
      document.getElementById("main").style.height = sliderValue8 + "px";

      //Breedte canvas
      document.getElementById("main").style.width = sliderValue9 + "px";


      //Values tonen
      document.getElementById("valueBreedte1").innerHTML = sliderValue1;
      document.getElementById("valueHoogte1").innerHTML = sliderValue2;
      document.getElementById("valueBreedte2").innerHTML = sliderValue3;
      document.getElementById("valueBreedte3").innerHTML = sliderValue4;
      document.getElementById("valueXmeter3").innerHTML = "-" + sliderValue5;
      document.getElementById("valueHoogte4").innerHTML = sliderValue6;
      document.getElementById("valueBreedte4").innerHTML = sliderValue7;
      document.getElementById("canvasHoogte").innerHTML = sliderValue8;
      document.getElementById("canvasBreedte").innerHTML = sliderValue9;

}
html {
    font-family: Helvetica, Arial, sans-serif;
}

#main {
    overflow: hidden;
    /* width: 1860px;*/
    width: 600px;
    height: 600px;
    position: absolute;
    border: 3px solid rgba(0, 0, 0, 0.397);
}

.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.parameters1 {
    grid-area: 1 / 1 / 2 / 2;
}

.parameters2 {
    grid-area: 1 / 2 / 2 / 3;
}

.parameters3 {
    grid-area: 1 / 3 / 2 / 4;
}

.parameters4 {
    grid-area: 1 / 4 / 2 / 5;
}

.parameters5 {
    grid-area: 1 / 5 / 2 / 6;
}

#VLAK1,
#VLAK2,
#VLAK3,
#VLAK4 {
    position: absolute;
    margin: 0;
}

#VLAK1 {
    background-color: #e28e8e;
    width: 100px;
    height: 300px;
    z-index: -1;
}

#VLAK2 {
    background-color: #f3de7f;
    width: 100px;
    height: 300px;
    left: 95px;
    transform: skewX(30deg);
    z-index: -2;
}

#VLAK3 {
    background-color: rgb(176, 241, 168);
    width: 100px;
    height: 300px;
    left: 269px;
    transform: skewX(-30deg);
    z-index: -3;

}

#VLAK4 {
    background-color: #c3c3c3;
    width: 100px;
    height: 300px;
    left: 356px;
    z-index: -4;

}

p {
    margin: 0;
}

.slidecontainer {
    width: 10%;
    /* Width of the outside container */
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="theme.css">
    <script type="text/javascript" src="script.js"></script>
    <script src="html2canvas.min.js"></script>


    <title>4 VLAKKEN</title>
</head>

<body>
        <!--SLIDERS-->
        <div class="grid">
            <div class="parameters1">
                <p>Breedte vlak 1:</p>
                <p id="valueBreedte1">100</p>
                <input type="range" id="breedte1" value="100" min="100" max="600">
                <br><br>
                <p>Hoogte vlak 1:</p>
                <p id="valueHoogte1">300</p>
                <input type="range" id="hoogte1" value="300" min="173" max="600">
            </div>
            <div class="parameters2">
                <p>Breedte vlak 2:</p>
                <p id="valueBreedte2">100</p>
                <input type="range" id="breedte2" value="100" min="100" max="300">
                <br><br>
                <p>Hoogte vlak 2+3:</p>
                <p id="valueHoogte23">300</p>
                <input type="range" id="hoogte23" value="300" min="300" max="600">
            </div>
            <div class="parameters3">
                <p>Breedte vlak 3:</p>
                <p id="valueBreedte3">100</p>
                <input type="range" id="breedte3" value="100" min="100" max="300">
                <br><br>
                <p>X-meter vlak 3:</p>
                <p id="valueXmeter3">-0</p>
                <input type="range" id="xmeter3" value="0" min="0" max="200">
            </div>
            <div class="parameters4">
                <p>Breedte vlak 4:</p>
                <p id="valueBreedte4">100</p>
                <input type="range" id="breedte4" value="100" min="100" max="600">
                <br><br>
                <p>Hoogte vlak 4:</p>
                <p id="valueHoogte4">300</p>
                <input type="range" id="hoogte4" value="300" min="0" max="600">
            </div>
            <div class="parameters5">
                <p>Breedte canvas:</p>
                <p id="canvasBreedte">600</p>
                <input type="text" id="breedteCanvas" value="600" min="0" max="1860">
                <br><br>
                <p>Hoogte canvas:</p>
                <p id="canvasHoogte">600</p>
                <input type="text" id="hoogteCanvas" value="600" min="0" max="600">
            </div>
        </div>
        <br><br>

        <div ID="main">
            <div id="VLAK1"></div>
            <div id="VLAK2"></div>
            <div id="VLAK3"></div>
            <div id="VLAK4"></div>
        </div>
    <script>
        html2canvas(document.querySelector("#main")).then(canvas => {
            document.body.appendChild(canvas)
        });
    </script>
</body>

</html>
...