Html2canvas: Text tags in SVG overlap (duplicated / doubling)

Created on 19 Feb 2015  ·  24Comments  ·  Source: niklasvh/html2canvas

(Sorry, I am not good at english)

Hello,
I am using this awesome script to render SVG tags
There is some text overlapping when I render the text tag in SVG to canvas
Text tag be processed as a Text node and also SVG
You can see that easily with transform property
2015-02-19 15 08 29_2
Here is sample code (with html2canvas 0.5.0-alpha2)

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

And Here is my quick change

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this will help

Needs More Information
Source
picture hyojin
👍4 ❤2

Most helpful comment

@hyojin
After test it on IE, your fix doesn't works because parentElement property is not populate on the current node. Use parentNode instead ! In any case, it will be more clear because we are into the NodeParser and it talk about node.

Otherwise, instead test on tag name, i change my code to test the instance of parentNode and process the current node has a TextContainer only if the parentNode isn't a SVGElement.

It works on chrome and ie11. on firefox i can't test it because of blank canvas bug !

My code 

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this helps.

picture ncoquelet on 6 Aug 2015
❤2

All 24 comments

Thank you#Hyojin. That helps me.

josnabattula picture josnabattula on 17 Mar 2015

Thanks ,help me a lot!

natee picture natee on 23 Jul 2015

Thanks for your fix !

you can also check on tspan tagName :
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet picture ncoquelet on 4 Aug 2015
👍1

@ncoquelet I updated my code. Thanks!

hyojin picture hyojin on 5 Aug 2015

@hyojin
After test it on IE, your fix doesn't works because parentElement property is not populate on the current node. Use parentNode instead ! In any case, it will be more clear because we are into the NodeParser and it talk about node.

Otherwise, instead test on tag name, i change my code to test the instance of parentNode and process the current node has a TextContainer only if the parentNode isn't a SVGElement.

It works on chrome and ie11. on firefox i can't test it because of blank canvas bug !

My code 

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

I hope this helps.

ncoquelet picture ncoquelet on 6 Aug 2015
❤2

fix my firefox problem, works on ff too :-)

ncoquelet picture ncoquelet on 6 Aug 2015

More clear!
I also checked that it works well on ff.
I merged your fix and pull request was updated. Thanks :)

hyojin picture hyojin on 12 Aug 2015
👍1

@hyojin @ncoquelet thanks for the investigation into this and the fix. I ran into the exact same problem the other day and I wasn't entirely sure what was causing it.

berendberendsen picture berendberendsen on 17 Jul 2016
😄1

I am not sure where I am getting confused here but I am getting the exception as "Uncaught ReferenceError: NodeParser is not defined"

Suchetana10 picture Suchetana10 on 2 Aug 2016

@Suchetana10 When did you get the exception? in loading script?

hyojin picture hyojin on 5 Aug 2016

@hyojin thank you.. worked for me

vishwasvadavi picture vishwasvadavi on 25 Oct 2016

@hyojin thanks! works perfectly for me too

nugen picture nugen on 13 Feb 2017

@vishwasvadavi @nugen I'm happy to hear that! :)

hyojin picture hyojin on 14 Feb 2017

Some people still have the issue with text element, I change this issue opened and I will send PR again.

hyojin picture hyojin on 14 Feb 2017

image

seemasingh123 picture seemasingh123 on 25 Feb 2017

Does anyone have a build of the library with this fix in it that I can test? Seeing same issue on highcharts page..

theinventor picture theinventor on 24 Mar 2017

Is this build available with the fix? I am still facing this issue with highcharts.

Nywlem11 picture Nywlem11 on 2 Aug 2017

Is this fix available in build or we have to create an override ?

sgsmittal picture sgsmittal on 12 Oct 2017

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

niklasvh picture niklasvh on 12 Dec 2017

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

no-response[bot] picture no-response[bot] on 12 Dec 2017

Dear @niklasvh ,

Thank you for this amazing library. I am able to reproduce this issue with the latest version - v1.0.0-rc.3

I have created an example on CodePen here (Chrome only) where you will see that some of the text nodes (in the Graph title) are duplicated.

Steps to reproduce -

  1. Please open the CodePen link - https://codepen.io/karannagupta/pen/RXpddB in Chrome only
  2. Click on Copy to Clipboard button
  3. Wait for the animation to finish (or see console for copied message)
  4. Paste the graph in paint or a document (ctrl + v)

The graph titles are added on Line#193

@hyojin , would you please open the issue again?

Regards,
Karan


text-duplication

karannagupta picture karannagupta on 10 Sep 2019

Hi @karannagupta
Could you try my branch to check whether it comes from the same reason?

hyojin picture hyojin on 11 Sep 2019

Hi @hyojin

With your version of the library (v0.5.0-alpha2) it doesn't work. You can test your library on my Pen here

Also, I would like to use the latest version of html2canvas. I also don't need to use html2canvas.svg then.

Regards,
Karan

karannagupta picture karannagupta on 11 Sep 2019

Turns out it is an issue with Unicode fonts

image

karannagupta picture karannagupta on 11 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

bishwapoudel picture bishwapoudel  ·  4Comments
wbarrantes picture wbarrantes  ·  3Comments
Loki180 picture Loki180  ·  4Comments
anthonymejia picture anthonymejia  ·  4Comments
Juliazhong picture Juliazhong  ·  4Comments