解决html2canvas截图不全问题

最近公司要求做一个生成海报，html2canvas是个不错的选择，随之而来的问题，当页面的滚动条不在顶部的时候出现，截图不全，顶部出现白屏问题，我当时是各种百度各种搜索问题还是没有得到解决。
我知道的原因是：滚动了滚动条而造成的，html2canvas是根据屏幕截图进行截图，如果内容高度高于屏幕时，就会出现这样的问题

我的解决方法：
当用户点击分享海报按钮时：
1、获取滚动条的位置，body固定定位，top值为负当前滚动条的位置。
2、设置延时100毫秒后再获取要生成海报的元素，当生成海报之后，再把滚动条设置回原来的位置。
然后我的截图再没有出现顶部白屏问题。

html代码

<div class="imgBox" id="imgBox">
   <img class="bg" src="https://img.52tbc.com/elbg3.png" /> 
   <div id="qrcode"  class="ma"></div>
</div>

css代码

.imgBox{
  position: absolute;
  top: -1000%;
  width: 100%;
  .bg{
    width: 100%;
    display: block;
  }
  .ma{
    width:2.8rem;
    height: 2.8rem;
    position: absolute;
    top: 52.6%;
    left: 50%;
    transform: translateX(-50%);
    canvas{
      width: 2.8rem;
      height: 2.8rem;
    }
    img{
      width: 100%;
      height: 100%;
    }
  }
}

js代码
 

function share() {
  var y= window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0;
    $('body').css({
      position:'fixed',
      top:`-${y}px`
    });
    setTimeout(function () {
      var targetDom = document.getElementById('imgBox');
      html2canvas(targetDom, {
        useCORS: true,// 开启跨域配置
        height: targetDom.scrollHeight,//canvas高
        width: targetDom.scrollWidth，//canvas宽
      }).then(canvas => {
        let url = canvas.toDataURL("image/jpeg", 1.0);
        $('body').css({
          position:'static',
        });
        window.scrollTo(0,y);
      });
    },100)
}



第一次写博客,写得不好，请多多见谅。以后我会将工作上遇到的难题难点记录下来，希望能帮到需要帮助的人。如有更好的方法，请多多指教。