html2canvas не работает для псевдоэлемента

Question

Я работаю над сохранением изображения Div. но div имеет псевдоэлемент, однако я узнал, что html2canvas не поддерживает псевдоэлемент.

Как это решить? Есть ли другая библиотека для сохранения div как изображения?

Я использую ссылку ниже, чтобы создать древовидную структуру:
https://codepen.io/P233/pen/Kzbsi
и я хочу сохранить это как изображение.

Для этого я использую html2canvas

$(document).ready(function() {
  html2canvas($("#home1"), {
    onrendered: function(canvas) {
      var image = new Image();
      image.src = divByteArray;
      document.getElementById('image').appendChild(image);

      //window.open(divByteArray);          
      /* $("#test").attr('href', canvas.toDataURL("image/png"));
                    $("#test").attr('download', 'checkFile.png');
                    $("#test")[0].click(); */
    }
  });
});

Пожалуйста, не помещайте свой комментарий в функциональную скобку. Я не ставлю всю функцию.
Я просто хочу знать, есть ли другая библиотека, которая сохраняет div как изображение?

Answer 1

Вы можете использовать html2canvas.js и canvas2image для преобразования div в canvas и преобразования в изображение.

Answer 2

В браузерах, отличных от Google Chrome, getComputedStyle()на псевдоэлементах выберите стиль границы из основного элемента. поэтому вам нужно будет включить стиль границы в основной элемент.

Вот трюк, измените этот код:

div::before {
content: 'Hello',
border-top: 1px solid green;
}

кому:

div {
border: 0 solid;
}

div::before {
content: 'Hello',
border-top: 1px solid green;
}

Answer 3

Кажется, что html2canvas отлично работает с вашим кодом: https://codepen.io/anon/pen/gMOmpB

Интересно, как вы "узнали", что это не работает с псевдоэлементами?

Более простой пример, _{который не работает в фрагменте стека...}:

https://jsfiddle.net/whtsavpp/

html2canvas(d).then(function(c){document.body.appendChild(c)})

div:after{content:'hello'}
canvas{border: 1px solid black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<div id="d"></div>