html2canvas делает снимок экрана элемента DOM с пустым - PullRequest
Новая
       14

html2canvas делает снимок экрана элемента DOM с пустым

0 голосов
/ 01 мая 2020

Я пытаюсь сделать снимок экрана элемента на моей странице с помощью html2pdf и добавить его над этим элементом, но он отображается пустым.

Вот мой тег сценария: <script src='https://html2canvas.hertzen.com/dist/html2canvas.js'></script>

Вот мой html (извините, это немного сумбурно, важная часть в том, что в разделе есть идентификатор "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, она будет работать нормально, но если я нацеливаюсь на любой указанный элемент c, снимок экрана будет пустым. Есть идеи, почему это не работает? Я просто идиот и пропустил что-то очевидное?

Любые другие статьи, которые я видел по этому поводу, имеют отношение к изображениям, не отображаемым на скриншоте, но у меня нет изображений в моем html.

РЕДАКТИРОВАТЬ: У меня работает jsfiddle, который я вставил в комментарии, но я не знаю, почему он работает. Буду признателен за отзыв.

...