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

博客介绍了使用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 截取滚动条隐藏部分内容的功能了,你学会了吗?

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值