【解决】html2canvas截图不全的问题
微wx笑
2022-06-07【运维日志】
2
0关键字：
html2canvas
在公司开发中，遇到测试反馈的问题，在用户签约生成图片转发的时候，图片样式戳，截图不全
在公司开发中，遇到测试反馈的问题，在用户签约生成图片转发的时候，图片样式戳，截图不全
于是采用解决方案2，修复了此问题。
第一种原因：
在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图。
解决方案：（延迟）
setTimeout(() => {
html2canvas(
document.getElementById('contract-container'),
{ scale: 1 }
).then( canvas => {
var contractData = canvas.toDataURL("image/jpeg");
});
}, 500);第二种原因:
滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题
解决方案：(在生成截图前，先把滚动条置顶)
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");
});作者：素时年锦
链接：https://www.jianshu.com/p/96a7ee1341be
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
