javascript - html2canvas screenshot maken van het huidige venster, niet van het gehele lichaam

Ik probeer een screenshot te maken van de volledige inhoud van een pagina (inclusief de velden die door de gebruiker zijn ingevuld) in JavaScript, maar html2canvas maakt alleen een screenshot van het huidige venster, zelfs wanneer ik de hoogte op een groot getal instel. De voorbeelden op de html2canvas-website lijken mijn gewenste functionaliteit te hebben, maar ik kan niet begrijpen wat zij anders doen.

<button id="pdfbutton" type="button">Click Me!</button>

<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            // document.body.appendChild(canvas);
            var img = canvas.toDataURL("image/png");
            console.log(img);
            document.body.appendChild(canvas);

        }
        // height: 10000
    });
});
</script>

Laat me weten of er nog andere manieren zijn om een screenshot te maken bij een knopklik in JavaScript (zonder een URL in te voegen, omdat de gebruiker velden op mijn pagina invult).

Antwoord #1

Dit probleem opgelost door de style-attribuut (hoogte, positie) te verwijderen die niet wordt ondersteund door html2canvas en deze toe te voegen na het maken van de screenshot. In mijn geval had ik problemen met positie.

  $('.element').css('position','initial'); // Change absolute to initial
  $my_view = $('#my-view');
  var useHeight = $('#my-view').prop('scrollHeight');
  html2canvas($my_view[0], {
    height: useHeight,
    useCORS: true,
    allowTaint: true,
    proxy: "your proxy url",
    onrendered: function (canvas) {
        var imgSrc = canvas.toDataURL();
        var popup = window.open(imgSrc);
        $('.element').css('position','absolute');
    }
  });

Dit zal een screenshot maken van het hele scherm inclusief het scrollbare gedeelte. Controleer deze oplossing

Antwoord #2

Html2Canvas heeft een probleem waardoor het een element vanuit de grens van het bovenste venster moet weergeven. U kunt overwegen naar de bovenkant van het element te scrollen.

Het tweede probleem is het omgaan met overloop. Stel overflow: visible in op het bovenliggende element en verwijder het na export.