HTMLCanvans 使用指南

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