为什么html2canvas的顶部有一个空白？答案

【问题标题】：why there is a White space on the top on html2canvas?为什么html2canvas的顶部有一个空白？
【发布时间】：2020-01-16 02:18:24
【问题描述】：

我的html2canvas 上有一个空白区域，我不确定发生了什么。这是我目前的代码。

function doFunction() {

  html2canvas(document.querySelector("#capture"), ).then(canvas => {
    $("body").append(canvas);
  });
}

$("button").click(function() {
  doFunction();
});

div {
  box-sizing: border-box;
  font-family: 'ABeeZee', sans-serif;
}

body {
  background-color: red;
}

#capture {
  width: 900px;
  height: 900px;
  background-color: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div id="capture">
  Hello
</div>
<button type="button">Click Me!</button>

这是附加的画布。请注意，顶部有一个空白区域。如何删除它？

【问题讨论】：

您好，我也面临同样的问题。有什么解决方案有效吗？
@BhumiSukhadiya 尝试了一切，但仍然面对它..

标签： javascript html css html2canvas

【解决方案1】：

尝试将此添加到您的样式 css 中

*{
    margin:0;
    padding:0;
}

同时尝试清除您的浏览器缓存，这在大多数情况下都是问题所在。如果这不起作用，请尝试删除所有 css 样式并将它们一一添加，以查看它是何时以及如何造成的。

【讨论】：

【解决方案2】：

GitHub Issue

您应该检查文档滚动，当页面滚动时我面临同样的问题活动或向下滚动页面时。

尝试添加

{
    scrollX: 0,
    scrollY: -window.scrollY
}

到 html2canvas 选项

【讨论】：

@Fazlur-rahman 给出的这个选项是 html2canvas 中的选项，如下所示， html2canvas(data, { allowTaint: true , scrollX:0, scrollY: -window.scrollY }).then(canvas => {});
谢谢你拯救我的一天:)
我和 OP 有同样的问题，但是这里的解决方案导致我的页面出现滚动，然后空白位于我的 pdf 的底部。将两个滚动都设置为 0，即 html2canvas(content, {scrollX: 0,scrollY: 0}) 为我解决了这个问题。
好吧，我也必须使用 -window.scrollY。感谢您的回答（无论是您的还是来自线程）。
对我来说，我的画布末端有一条 1px 的垂直线，通过将 backgroundColor 选项设置为与内容相同的背景颜色来修复它。 html2canvas(content, { backgroundColor: myContentColor });

【解决方案3】：

我遇到了类似的问题，通过一些试验，我意识到通过在生成 pdf 之前滚动到页面顶部解决了它。

所以我在生成 pdf 之前添加了这一行以滚动到页面顶部并且它起作用了：

window.scrollTo(0,0);

【讨论】：

我也遇到了和你一样的问题，但是我通过 html2canvas(content, {scrollX: 0,scrollY: 0}) 解决了这个问题，这样用户就不会失去他们在页面上的位置。

【解决方案4】：

试试这个css

*{
     padding:0;
      margin:0;
}

【讨论】：

【解决方案5】：

以下代码对我有用

html2canvas(element , {
    scrollX: -window.scrollX,
    scrollY: -window.scrollY,
    windowWidth: document.documentElement.offsetWidth,
    windowHeight: document.documentElement.offsetHeight
})

【讨论】：