html2canvas 不适用于伪元素

Question

我正在尝试使用html2canvasusing截取屏幕截图ionicframework。除了我有:before. 如

CSS

.e_amount::before{
    content: "$";
}

---

在截取屏幕截图之前，它看起来像这样：

在html2canvas 代码之后：

---

注意到美元符号 ($) 与 10.00 不一致。

我试过在头部包含样式，但仍然无法正常工作。我错过了什么？

JS

html2canvas(document.getElementById('card'), {
    onrendered: function(canvas) {
        window.canvas2ImagePlugin.saveImageDataToLibrary(
            function(msg){
                console.log(msg);
                var message = {
                    text: "QR Generated",
                    image: "file://"+msg
                };
                window.socialmessage.send(message);
            },
            function(err){
                console.log(err);
            },
            canvas
        );
    }
});

html

<div class="list card" id="card">
    <div class="item item-body">
        <div class="row" style="margin-bottom: 5px;  border-bottom: 1px solid #ddd;">
            <style>.e_amount::before{content:'$' !important;}</style>
            <div class="col bold">{{"amount" | translate}}</div>
            <div class="col e_amount"></div>
        </div>
    </div>
</div>

Answer 1

重置类 .e_amount 的所有边距和填充，并将其框大小设置为 border-box。