html2canvas 向下移动文本

Question

我正在尝试使用 html2canvas 将 a 转换<div>为图像。然而，有一个问题。<div>红色圆圈标记内的文本Figure 1没有填充或任何引入参数的偏移量。但当转换为图像时，文本上方会出现错误间隙，如 中的红色圆圈所示Figure 2。我用过<h3>（标有黑色背景）和一个<span>（标有绿色背景）。

Figure 1

Figure 2

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

Answer 1

Tailwind CSS在预检期间将标记display的属性设置为。这会在元素下方引入一个在 UI 渲染中看不到的换行符。但是，当您使用 将相同的 HTML 转换为图像时，会渲染换行符，从而在结果图像中添加不必要的空格。为了解决这个问题，我们可以将以下代码添加到文件中。imgdisplay: block;html2canvastailwind.css

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

上面的代码应该添加到该@tailwind base;行之后。这为我解决了这个问题。