html2canvas截图捕捉当前窗口，而不是整个身体

Question

Trying to capture a screenshot of the entire body of a page (including the fields filled in by user) in javascript, but html2canvas only captures the current window, even when I set the height to a huge number. The html2canvas website examples appear to have my desired functionality, but I'm not able to understand what they're doing differently.

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

Please let me know if there are any other ways to capture a screenshot on a button click in javascript (without inserting a URL, because the user fills in fields on my page).

Answer 1

Solved this problem by removing style attribute (height, position) which does not support by html2canvas and adding it after capturing the screenshot. In my case I faced problem with position.

  $('.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');
    }
  });

This will take screenshot of the whole screen including scrollable part. check this solution

Answer 2

Html2Canvas has an issue which forces it to render an element from the top window's boundary. You may consider scrolling to the top of the element.

The second issue is overflow handling. Set overflow: visible on the parent element and remove it after export.