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。这样就合理了。