html2canvas 生成图片 生成一半有图一半空白 是什么原因导致

一、首先 你需要查看 你需要生成图片的 大块dom结构 是否渲染完成

1.如果还未渲染完成 那你生成的图片 肯定是空白

解决办法：你可以写一个 延迟器
setTimeout(function() {
     /* html2canvas 1.0.5 版本 */
     html2canvas(document.querySelector("#captureimg"), ).then(canvas => {
          console.log(canvas)
     });
}, 500);

2.如果页面渲染完成 截图 还是空白，就要检查你的页面是否是一屏多的内容 ，那么说明是和页面的滚动条的高度有关，高度不为0的情况下 ，生成图片就是有空白

解决办法：在生成图片之前 让滚动条高度为0就好
window.pageYOffset = 0;
document.documentElement.scrollTop = 0；
document.body.scrollTop = 0；
setTimeout(function() {
     /* html2canvas 1.0.5 版本 */
     html2canvas(document.querySelector("#captureimg"), ).then(canvas => {
          console.log(canvas)
     });
}, 500);

注意：切忌页面高度在一屏以外，再生成图片的时候，不要随便滚动页面，不然生成的图片有空白 ，是因为页面高度、滚动条高度 、页面顶部距离不为0了