时间戳

首页 > 解决方案 > html2canvas 只渲染 div 元素的可见部分

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

问题描述

我正在使用 html2canvas 截取页面中可滚动的 div 元素。但是，它只呈现可见的内容而不是整个 div。

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

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

有没有人有这个问题的经验？谢谢！

标签： javascriptcsshtml2canvas

解决方案

尝试向#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 中有效，我无法分叉，因为我没有注册。）

推荐阅读