html2canvas 只渲染 div 元素的可见部分

Question

我正在使用 html2canvas 截取页面中可滚动的 div 元素。但是，它只渲染可见的部分而不是整个 div.

这是一个小例子：https://codepen.io/johnhckuo/pen/abpGrmr

我做了一些搜索，看到其他人建议在 html2canvas 参数中设置 scrollY: -window.scrollY。但这对我不起作用。

有没有人有这方面的经验？谢谢！

Answer 1

尝试向#photo 添加一个子元素，它不受 CSS 的约束 - 像这样：

<div id="photo">
<div id = "photo-inner">
        <button onclick="takeshot()">
        Take Screenshot
    </button>
    <h1>Test</h1>
    Hello everyone! This is a
    trial page for taking a
    screenshot.
    <br><br>
    This is a dummy button!
    <button> Dummy</button>
    <br><br>
    Click the button below to
    take a screenshot of the div.
    <br><br>
    <button onclick="takeshot()">
        Take Screenshot
    </button>
</div>
</div>

然后，让子元素成为html2canvas的目标：

let div = document.getElementById('photo-inner');

（这在你的 Codepen 中有效，我不能 fork，因为我没有注册。）

html2canvas 只渲染 div 元素的可见部分

html2canvas render only the visible part of div element

javascript

css

html2canvas