HTML2Canvas-如何捕获所有div？

Question

I'm using html to canvas for capture div Here is my code :

 $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>

The issue is that just a part of the div is captured the part that visible in the screen - as screenshot . I need to capture all the div - any idea ?

Answer 1

You are just accessing the div with Id which will give you only a single element. To capture all the divs you can use class selector . add a class to all your divs let say class = 'test' . then you can do this.

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

So what you are doing is replacing this

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

With

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