html2canvas 不适用于伪元素

Question

I am working on saving image of div. but div has pseudo element , however i come to know that html2canvas does not support pseudo element.

How to solve it ? Is there any other library to save div as image ?

I am using below link to create a tree structure :
https://codepen.io/P233/pen/Kzbsi
and i want to save this as image.

For this purpose I am using 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(); */
    }
  });
});

Please don't put your comment on function bracket. i am not putting whole function.
I just want to know if there is another library which save div as image?

Answer 1

您可以使用html2canvas.js和canvas2image将 div 转换为画布并转换为图像。

Answer 2

html2canvas seems to work just well with your code : https://codepen.io/anon/pen/gMOmpB

I wonder how you did " come to know " that it doesn't work with pseudo-elements?

A simpler example, _{which doesn't work in stack-snippet...} :

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>

Answer 3

In browsers other than Google chrome, getComputedStyle() method on pseudo elements pick the border style from main element. so you will have to include the border style on main element.

Here is the trick, change this code:

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

to:

div {
border: 0 solid;
}

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