10

I am trying to take a screenshot by using html2canvas using ionicframework. The html2canvas works in every way except those that i have classes with :before. such as

CSS

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

Before taking the screen shot it looks like this: enter image description here

After the html2canvas code:

enter image description here

Noticed the Dollar Sign ($) is not aligned with the 10.00.

I have tried including the style in the head it is still not working. What am i missing?

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>
Souleste
  • 1,887
  • 1
  • 12
  • 39
Gene Lim
  • 1,068
  • 2
  • 14
  • 36
  • 4
    Can you provide fiddle of your code ? – Rayon Dec 15 '15 at 04:02
  • 1
    first of all, do not include style inside body tags, strictly add it into . Secondly , why do you using ::before, maybe for your solution will be much better to include new with tag and than align together – x-magix Apr 13 '20 at 23:28
  • To get an answer or a comment, you should [write an issue](https://github.com/niklasvh/html2canvas/issues/new) to the library author. – Finesse Apr 14 '20 at 03:42

1 Answers1

0

reset all margins and paddings for class .e_amount and also set its box-sizing to border-box.

Neeraj Gupta
  • 23
  • 3