最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - html2canvas screenshot capturing current window, not entire body - Stack Overflow

programmeradmin4浏览0评论

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

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

Share Improve this question edited Apr 25, 2015 at 18:07 user2657795 asked Apr 25, 2015 at 17:58 user2657795user2657795 791 gold badge1 silver badge4 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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

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.

发布评论

评论列表(0)

  1. 暂无评论