html2canvas 不适用于伪元素答案

【问题标题】：html2canvas not working for pseudo elementhtml2canvas 不适用于伪元素
【发布时间】：2020-08-07 00:23:08
【问题描述】：

我正在保存 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 保存为图像的库？

【问题讨论】：

您能否在问题中加入html、css、js？
html2canvas 似乎与您的代码配合得很好：codepen.io/anon/pen/gMOmpB 您是如何“知道”的？一个更简单的例子：jsfiddle.net/whtsavpp

标签： javascript jquery html canvas html2canvas

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

我想知道您是如何“知道”它不适用于伪元素的？

一个更简单的例子，_{在 stack-sn-p...} 中不起作用：

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>

【讨论】：

@Wei-jye，那是因为您将 html2canvas 的目标设置为您的 #d 元素，所以 h2c 会将渲染图像的框设置为该元素的边界框。但是您的伪元素是从这个 #d 元素中设置的，因此它不会被渲染。如果您确实选择了外部元素（此处为 document.body），那么您将选择 also have the pseudo-element。但我同意在这种情况下 h2c 可以足够聪明地扩展 BBox...如果最新版本仍然具有这种行为，可能值得在 github 的项目上获得一张票。
感谢您的解释。我注意到了这种行为并通过添加另一个带有填充的容器来包装盒子来解决它，现在它工作正常。我已经在现有的 github 问题中指出了这一点。现在我正在弄清楚如何捕获透明背景，因为默认情况下 html2canvas 给了我白色背景
@Wei-jye 只需在你的 CSS 中设置 :root,body{background:transparent}。白色背景是此节点之一的默认值。 jsfiddle.net/whtsavpp/14

【解决方案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;
}

【讨论】：