html2canvas拍摄的DOM元素的屏幕截图显示为空白

Question

我正在尝试使用html2pdf截取页面上某个元素的屏幕截图，并将其附加到该元素上方，但是显示为空白。

这是我的脚本标签： <script src='https://html2canvas.hertzen.com/dist/html2canvas.js'></script>

这是我的html（对不起，这有点混乱，重要的是该部分的ID为“ sigSection”）：

<section id="sigSection">
  <div class="ReactCollapse--collapse" style="height: auto; overflow: initial;">
    <div class="ReactCollapse--content">
      <div style="max-width: 500px;">
        <div style="margin-bottom: 0.5rem;">
          <h3><i class="i-check-circle"></i><span style="margin-left: 0.5rem;">Estimate Accepted</span></h3></div>
        <div id="signature" class="signed-line"><span>JMan</span><span>Apr 27, 2020</span></div>
        <div><span>JMan</span></div>
      </div>
    </div>
  </div>
</section>

这是我的JS：

previewImage = () => {
    var element = document.getElementById("sigSection");
    html2canvas(element).then(canvas => {
    element.before(canvas)
    });
};

如果我将element变量更改为document.body，它可以正常工作，但是如果我针对任何特定元素，则屏幕截图为空白。任何想法为什么这不起作用？我只是白痴，错过了明显的东西吗？

我见过的任何其他文章都与未在屏幕截图中呈现的图像有关，但是我的html中没有任何图像。

编辑：我已经在注释中添加了jsfiddle，但是我不知道它为什么起作用。希望能得到反馈。