1 普通截取屏幕,没有滚动条
一般直接按照教程使用就可以,不会出问题
2 有滚动条长截图
1)
//页面滚动到顶部
document.body.scrollIntoView()
setTimeout(function() {
const targetDom = document.getElementById("scrollW");
//copy dom 到body 里面
const copyDom = targetDom.cloneNode(true);
copyDom.style.width = targetDom.scrollWidth + "px";
copyDom.style.height = targetDom.scrollHeight + "px";
copyDom.id = "copyDom";
document.body.appendChild(copyDom);
var opts = {
allowTaint: false,
useCORS: true,
height: targetDom.scrollHeight,
width: targetDom.scrollWidth,
background: "#111111"
};
that.html2canvas(copyDom, opts).then(canvas => {
// removeChild
// console.log(document.getElementById("scrollW"))
// let node = document.getElementById("scrollW")
// document.body.removeChild(node);
let dataURL = canvas.toDataURL("image/png");
console.log(dataURL, canvas);
// 给图片的路径赋值
that.imgPath = dataURL;
// 显示img节点
that.showImg = true;
// 关闭等待框
toast1.clear();
//删除body 里的dom 节点
let copyDom = document.getElementById("copyDom");
document.body.removeChild(copyDom);
//添加滚动
// that.$nextTick(() => {
setTimeout(() => {
that.addScroll()
}, 500);
// })
});
},500);
坑,body必须滚动到最顶部,或者是整个页面必须滚动到最顶部,如果不是的话,插件会自动给顶部一个偏移量,你往下滚动了多少,他就会自动往上截取多少。这样才能截取到全部,不过这反倒成了一个坑,因为我们是把元素放到body里的最后面,然后截取的是这个dom,无论你body 偏移了多少,你截取的都是当前的dom 然后变成canvans,你当前的doming不需要偏移
插件的思路是:如果你截取的是body这个元素,然而body 里面的元素超出了body,这个时候,如果你还是截取的body这个元素,并且你向下滚动了一段距离,,为了得到body 元素和里面的全部内容,这个时候需要自动截取窗口顶部的dom。这样就合理了。