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转换为画布并转换为图片。

Answer 2

html2canvas似乎与您的代码配合得很好：https://codepen.io/anon/pen/gMOmpB

我想知道你是怎么做的“来了解”它不适用于伪元素？

一个更简单的例子，_{在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

在非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;
}

html2canvas不适用于伪元素

3 个答案: