Html2canvas - wie alle div zu erfassen?

Question

Ich html für die Aufnahme div Hier auf die Leinwand verwendet, ist mein 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> 

Das Problem ist, dass nur ein Teil des div den Teil aufgenommen wird, dass sichtbar auf dem Bildschirm - als Screenshot. Ich muss alle div - jede Idee erfassen?

Answer 1

Sie greifen gerade auf das div mit Id zu, das Ihnen nur ein einzelnes Element geben wird. To capture all the divs you can use class selector. fügen Sie eine Klasse zu allen Ihren divs hinzu, sagen wir class = 'test'. dann kannst du das tun.

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

Also, was tun Sie das

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

Mit

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