html2canvas 向下移动文本

Question

我正在尝试使用 html2canvas 将

<div>

转换为图像。然而，有一个问题。

<div>

中用红色圆圈标记的

Figure 1

内的文本没有填充或任何类型的偏移引入参数。但当转换为图像时，文本上方会出现错误间隙，如

Figure 2

中的红色圆圈所示。我使用了

<h3>

（以黑色背景标记）和

<span>

（以绿色背景标记）。

Figure 1

Figure 2

为什么会这样？有办法解决这个问题吗？

Answer 1

Tailwind CSS 在预检期间将

display

标签的

img

属性设置为

display: block;

。这会在元素下方引入一个在 UI 渲染中看不到的换行符。但是，当您使用

html2canvas

将相同的 HTML 转换为图像时，会渲染换行符，从而在结果图像中添加不必要的空格。为了解决这个问题，我们可以将以下代码添加到

tailwind.css

文件中。

@layer base {
  img {
    @apply inline-block;
  }
}

上面的代码应该添加到

@tailwind base;

行之后。这为我解决了这个问题。

Answer 2

这对我有用。

<style>
    body{
        line-height: initial !important;
    }
</style>