javascript - HTML2Canvas 不渲染完整的 div，仅渲染屏幕上可见的内容

Question

我正在尝试使用 HTML2Canvas渲染 div 的内容。这是代码:

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-page div 本质上是整个页面，减去页眉和页脚。该 div 中的所有内容都可以通过滚动看到(有一些隐藏元素，但我不希望隐藏元素在图像中可见。)

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

举个例子来说明我的意思，下面是一个比较:

左边是 HTML2Canvas 应该如何渲染 div。右侧显示了运行上面的代码时的呈现方式。正确的图像是我的浏览器屏幕中可见的图像。

我确实尝试添加高度选项，但没有什么区别。

如果我滚动到页面的最顶部然后运行脚本，它将按预期渲染整个 div。

如何渲染 div 而无需滚动到顶部？

Answer 1

希望这对您有帮助:

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