今天查了一下没有比较好的解决方案,于是自己写一篇。其实也很简单,首先就是用 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 截取滚动条隐藏部分内容的功能了,你学会了吗?