【解决】html2canvas截图不全的问题

微wx笑 2022-06-07【运维日志】188 2 0关键字： html2canvas

在公司开发中，遇到测试反馈的问题，在用户签约生成图片转发的时候，图片样式戳，截图不全

在公司开发中，遇到测试反馈的问题，在用户签约生成图片转发的时候，图片样式戳，截图不全WCX无知

WCX无知

于是采用解决方案2，修复了此问题。WCX无知

第一种原因：

在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图。
解决方案：（延迟）WCX无知

 setTimeout(() => {
        html2canvas(
          document.getElementById('contract-container'), 
          { scale: 1 }
        ).then( canvas => {
          var contractData = canvas.toDataURL("image/jpeg");
        });
  }, 500);

第二种原因:

滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题
解决方案：(在生成截图前，先把滚动条置顶)WCX无知

        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        html2canvas(
            document.getElementById('contract-container'), 
            { scale: 1 }
        ).then( canvas => {
            var contractData = canvas.toDataURL("image/jpeg");
        });