HTML2Canvas不呈现完整div，只呈现屏幕上可见的内容？

Question

我正在尝试使用HTML2Canvas呈现div的内容。以下是html" target="_blank">代码：

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

我正在使用v5 beta 3。

当此代码运行时，它仅呈现屏幕上可见的内容。#potenzial页面div基本上是整个页面，减去页眉和页脚。此div中的所有内容都可以通过滚动显示（有一些隐藏元素，但我不希望隐藏元素在图像中可见）

我找不到哪里出了问题，也找不到为什么它不能保存整个div。我还应该注意，图像似乎与div一样高，但只是部分可见。

举一个例子来说明我的意思，这里有一个比较：

左边是HTML2Canvas应该如何呈现div。右边是它运行上面代码时的呈现方式。右边的图像是我的浏览器屏幕中可见的图像。

我确实尝试添加了height选项，但没有任何区别。

使现代化

如果我滚动到页面的最顶端，然后运行脚本，它将按原样呈现整个div。

如何渲染div而不必滚动到顶部？

Answer 1

我在我的案例中使用了window.scrollTo（），它对我有效。

下面是一个示例代码

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

Answer 2

一个对我有效的解决方案是在我的css中添加以下内容：

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

它可以防止html2CAN as将渲染限制在可视区域（这似乎是默认的）。

请看这里：https://github.com/niklasvh/html2canvas/issues/117

Answer 3

我希望我能帮助你

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
        });