html2canvas不能使用伪元素工作:之前

时间:2015-12-15 02:53:56

标签: html css ionic-framework html2canvas

我正在尝试使用ionicframework使用html2canvas截取屏幕截图。 html2canvas可以在各种方式工作,除了那些我有类:之前的类。比如

CSS

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

在拍摄屏幕之前。它看起来像这样 enter image description here

在html2canvas代码之后:

enter image description here

注意到美元符号($)与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>

1 个答案:

答案 0 :(得分:0)

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