html2canvas：文本偶尔重叠

Question

我正在尝试拍摄 DOM 元素的图像，然后在 pdf 演示文稿中使用它。我使用

html2canvas

库将 DOM 元素渲染到画布中，然后渲染到图像（dataUrl）中。

9/10 次它工作得很好，我对结果很满意，但有时会出现一个恼人的故障，你可以在下面看到

故障：

无故障：

正如您在第一张图片中看到的，单词是重叠的。

使用 html2canvas 时有什么方法可以避免此类故障吗？

Answer 1

通过向

iframe

添加

html2canvas

为渲染创建的字体解决了此问题。像这样：

// get font faces from original document
const fonts = document.fonts;

html2canvas(node, {
  onclone: (document) => {
    // add fonts to html2canvas's iframe
    fonts.forEach(font => {
      document.fonts.add(font)
    })
  }
})

不知道为什么会这样，但确实如此；）