为啥html2canvas的顶部有一个空白？

Posted 2023-03-05

【中文标题】为啥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 尝试了一切，但仍然面对它..

【参考方案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
)