html2canvas 底部空白答案

【问题标题】：html2canvas white space at the bottomhtml2canvas 底部空白
【发布时间】：2022-08-20 09:59:09
【问题描述】：

我在反应中写了这段代码

      function download(element) {
        html2canvas(element).then((canvas) => {
          window.open(canvas.toDataURL(\'image/png\'));
    });
  }

  return (
    <div className=\'box\' onClick={(e) => download(e.target)}>
      <h2>
        <img src={logo} alt=\'logo\' draggable=\'none\' />
        {title}
      </h2>
      <p>{text}</p>
    </div>
  );

和CSS

@import url(\'https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap\');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding-top: 2em;
  padding-bottom: 2em;
}

.boxContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.box {
  background-color: #212120;
  width: 600px;
  padding: 0.9em;
  cursor: pointer;
}

.box h2,
.box p {
  --color: rgb(218, 218, 218);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--color);
}
...

这段代码的目的是打开一个元素的屏幕截图。该代码有效，但是在屏幕截图的底部有一个空白区域（大约 2px 高）。我怎样才能删除它？谢谢：）

Image

标签： html css canvas html2canvas

【解决方案1】：

这个空间来自h2 标签。它需要像“g”或“y”这样的字母。您可以使用line-height: 0 将其删除。

在许多情况下，“2px 底部问题”来自img 标签。默认为display: inline。您可以使用display: block 并将其移出h2。

【讨论】：