html2canvas怎么截取可视区域,其他隐藏部分(仅限Y轴之
2022-02-24 本文已影响0人
阿克兰
// 获取滚动距离
getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (
document.documentElement &&
document.documentElement.scrollTop
) {
// Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
let arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
},
// 屏幕截屏
cutScreen() {
//可视区域的高度
let height =
document.documentElement.clientHeight == 0
? document.body.clientHeight
: document.documentElement.clientHeight;
let length = this.getPageScroll()[1];
try {
let test = document.getElementById("cutImg");
html2canvas(test, {
width: test.clientWidth, //DOM原始宽度
height: height,
y: length, //canvas开始的的Y坐标
scrollY: length,// 滚动
tainttest: false,
allowTaint: true,
useCORS: true,
scale: window.devicePixelRatio // 可以避免模糊
}).then(canvas => {
// 转成图片,生成图片地址
let imgUrl = canvas.toDataURL("image/png");
});
} catch (e) {
console.log(e);
}
}