html2canvas 截取滚动条隐藏部分的内容

最新推荐文章于 2025-07-01 15:37:54 发布

原创最新推荐文章于 2025-07-01 15:37:54 发布 · 置顶 · 1.1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html2canvas

前端专栏收录该内容

1 篇文章

订阅专栏

博客介绍了使用html2canvas截取滚动条隐藏部分内容的方法。先通过Element.scrollHeight获取要截图元素高度，用总高度减去可见高度，再在html2canvas初始化时配置Y轴偏移量为负的滚动条隐藏部分高度，最后给出代码实现该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天查了一下没有比较好的解决方案，于是自己写一篇。其实也很简单，首先就是用 Element.scrollHeight 获取要截图元素的高度，然后用总的高度减去可见的高度（用 jquery 的 height 方法获取），然后在 html2canvas 初始化的时候配置 Y 轴的偏移量为负的滚动条隐藏部分的高度。

不说了，直接上代码吧。

var scrollHeight = $('#theme1').prop("scrollHeight");
$('#theme1').scrollTop(scrollHeight);
var height = $('#theme1').height();

html2canvas(querySelector, {
                    scale: 3,
                    height: scrollHeight,  //画布高度（包含未显示的滚动部分）
                    y: (height + qRCodeHeight) - (scrollHeight + 20)  //Y 轴偏移量正好是负的未显示部分的高度
                }).then(function (canvas) {
                    canvas.toBlob(function (blob) {
                        saveAs(blob, pageID + type + ".jpg");
                    });
                });

这样就实现了，html2canvas 截取滚动条隐藏部分内容的功能了，你学会了吗？