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,因为用户填写了我的页面上的字段),请告诉我.

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

这将截取整个屏幕（包括可滚动部分）的屏幕截图。检查这个解决方案