html2canvas有滚动条时截图不完整问题解决

使用 html2canvas 截图时，如果网页中存在滚动条，截图可能会不完整。可以使用以下方法：

方法1、将截图区域独立于滚动区域，不受滚动影响

// 受滚动影响，会出现截图不完整情况
<div class="scroll">
  滚动区域
  <div class="canvas">截图区域<div>
<div>

修改后

// 截图不受滚动影响，不会出现截图不完整情况
<div class="scroll">滚动区域<div>
<div class="canvas">截图区域<div>

方法2、设置页面高度为固定值

在网页中存在滚动条时，可以设置页面的高度为一个固定值，这样就能够保证截图的完整性。例如：

body {
  height: 2000px;
}

这样设置页面高度为 2000 像素，即使存在滚动条也可以保证截图的完整性。

方法3、将滚动条位置设置为顶部

使用 JavaScript 将滚动条位置设置为顶部，然后再进行截图，最后再将滚动条位置设置回原来的位置。例如：

// 将滚动条位置设置为顶部

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

// 滚动到顶部
// window.scrollTo(0, 0);

// 截图操作

html2canvas(document.querySelector("#target")).then(canvas => {

  // 截图完成后将滚动条位置设置回原来的位置

  document.documentElement.scrollTop = oldScrollTop;

  document.body.scrollTop = oldScrollTop;

});

通过将滚动条位置设置为顶部，可以保证截图的完整性，但是需要注意将滚动条位置设置回原来的位置，避免影响用户体验。