HTML2Canvas-如何捕獲所有div？

Question

我使用html畫布捕獲div這是我的代碼：

 $scope.testCanvas = function()
            {
    html2canvas([document.getElementById('test')], {
                          onrendered: function(canvas) {
                              $("#divtest").append(canvas);
                          }
                        });
                });
}

    <div id="test">
    <article id="art2" class="p-Fitness p-Tile u-md-spaceTop p-FitnesssecurityPatch" >
        <section class="p-Tile-section">
            <div class="p-Fitness-impact"></div>
            <div class="p-Fitness-securityGraph"></div>
        </section>
   </article>
   <article id="art2" class="p-Fitness p-Tile u-md-spaceTop p-Fitness-securityPatch" >
        <section class="p-Tile-section">
            <div class="p-Fitness-impact"></div>
            <div class="p-Fitness-securityGraph"></div>
        </section>
    </article>
    </div>

    <div id="divtest">
    </div>

問題在於，僅捕獲了div的一部分，即屏幕上可見的部分-作為屏幕截圖。 我需要捕捉所有的div-有什么想法嗎？

Answer 1

您只是使用Id訪問div，這只會給您一個元素。 To capture all the divs you can use class selector 。 向您的所有div添加一個類，讓我們說class = 'test' 。 那么你可以做到這一點。

html2canvas(document.getElementsByClassName('test'), {....

所以，您正在做的是替換這個

[document.getElementById('test')] -- array with one element

用

  document.getElementsByClassName('test')  -- array of selected elements.