web-dev-qa-db-ja.com

HTML2Canvasの上には、なぜ白いスペースがあるのですか？

私の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>

これは添付のキャンバスです。上部には空白があります。どのように私はそれを取り除くことができますか？

enter image description here

javascripthtmlcsshtml2canvas
13
john

github号

ページスクロールがアクティブになっているとき、またはページがスクロールされたときに同じ問題に直面するのは、文書のスクロールを確認する必要があります。

追加してみてください

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

hTML2Canvasオプションに

3
Fazlur Rahman

これをあなたのスタイルのCSSに追加してみてください

*{
    margin:0;
    padding:0;
}
 _

また、ブラウザキャッシュを消去してみてください。これはほとんどの場合問題になります。それでもうまくいかない場合は、すべてのCSSスタイルを削除して、いつ、いつ発生しているのかを確認するには1つずつ追加してください。

0
Ruan