html2canvas截图只捕获当前窗口，而非整个页面。

Question

我正在尝试使用JavaScript捕获整个页面正文（包括用户填写的字段）的截图，但是html2canvas只能捕获当前窗口，即使我将高度设置为一个巨大的数字。Html2canvas网站示例似乎具有我想要的功能，但我无法理解它们在做什么不同。

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

请告诉我有没有其他方法可以在JavaScript中通过按钮点击来截取屏幕截图（不插入URL，因为用户会填写我的页面上的字段）。

- user2657795

Answer 1

通过移除不被html2canvas支持的样式属性（高度，位置），然后在截屏后再添加，解决了这个问题。在我的情况下，我遇到了位置方面的问题。

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

这将会截取整个屏幕，包括可滚动部分。 查看此解决方案

- Meroshini

Answer 2

Html2Canvas存在一个问题，它会强制从顶部窗口边界渲染元素。您可以考虑滚动到元素的顶部。

第二个问题是溢出处理。在父元素上设置overflow: visible，并在导出后将其删除。

- AlexGL