Html2canvas: Les balises de texte en SVG se chevauchent (dupliquées / doublées)

Créé le 19 févr. 2015 · 24Commentaires · Source: niklasvh/html2canvas

(Désolé, je ne suis pas bon en anglais)

Bonjour,
J'utilise ce script génial pour rendre les balises SVG
Il y a du texte qui se chevauche lorsque je rends la balise de texte dans SVG sur canvas
La balise de texte doit être traitée en tant que nœud de texte et également en SVG
Vous pouvez le voir facilement avec la propriété transform
2015-02-19 15 08 29_2
Voici un exemple de code (avec 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

Et voici mon changement rapide

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));
};

j'espère que cela aidera

Needs More Information

Source

hyojin

👍4 ❤2

Commentaire le plus utile

@hyojin
Après l'avoir testé sur IE, votre correctif ne fonctionne pas car la propriété parentElement n'est pas renseignée sur le nœud actuel. Utilisez parentNode place ! En tout cas, ce sera plus clair car on est dans le NodeParser et on parle de node.

Sinon, au lieu de tester sur le nom de la balise, je modifie mon code pour tester l'instance de parentNode et traiter le nœud actuel a un TextContainer uniquement si le parentNode n'est pas un SVGElement .

Il fonctionne sur chrome et ie11. sur firefox je ne peux pas le tester à cause d'un bug de la toile vierge !

mon 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));
};

J'espère que ça aide.

ncoquelet le 6 août 2015

❤2

Tous les 24 commentaires

Merci #Hyojin. Cela m'aide.

josnabattula le 17 mars 2015

Merci, aidez-moi beaucoup!

natee le 23 juil. 2015

Merci pour votre correction !

vous pouvez également vérifier sur tspan tagName :
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet le 4 août 2015

👍1

@ncoquelet j'ai mis à jour mon code . Merci!

hyojin le 5 août 2015

Il fonctionne sur chrome et ie11. sur firefox je ne peux pas le tester à cause d'un bug de la toile vierge !

mon 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));
};

J'espère que ça aide.

ncoquelet le 6 août 2015

❤2

résoudre mon problème de firefox, fonctionne aussi sur ff :-)

ncoquelet le 6 août 2015

Plus clair!
J'ai aussi vérifié qu'il fonctionnait bien sur ff.
J'ai fusionné votre correctif et la demande d'extraction a été mise à jour. Merci :)

hyojin le 12 août 2015

👍1

@hyojin @ncoquelet merci pour l'enquête à ce sujet et le correctif. J'ai rencontré exactement le même problème l'autre jour et je n'étais pas tout à fait sûr de la cause.

berendberendsen le 17 juil. 2016

😄1

Je ne sais pas où je suis confus ici, mais j'obtiens l'exception "Uncaught ReferenceError: NodeParser n'est pas défini"

Suchetana10 le 2 août 2016

@Suchetana10 Quand avez-vous obtenu l'exception ? en chargeant le script ?

hyojin le 5 août 2016

@hyojin merci .. travaillé pour moi

vishwasvadavi le 25 oct. 2016

@hyojin merci ! fonctionne parfaitement pour moi aussi

nugen le 13 févr. 2017

happyvishwasvadavi ugnugen Je suis content d'entendre ça ! :)

hyojin le 14 févr. 2017

Certaines personnes ont toujours le problème avec l'élément de texte, je change ce problème ouvert et j'enverrai à nouveau PR.

hyojin le 14 févr. 2017

seemasingh123 le 25 févr. 2017

Est-ce que quelqu'un a une version de la bibliothèque avec ce correctif que je peux tester ? Voir le même problème sur la page highcharts ..

theinventor le 24 mars 2017

Cette version est-elle disponible avec le correctif ? Je suis toujours confronté à ce problème avec highcharts.

Nywlem11 le 2 août 2017

Ce correctif est-il disponible dans la construction ou devons-nous créer un remplacement ?

sgsmittal le 12 oct. 2017

Est-ce toujours un problème avec la v1.0.0 ? Si oui, pourriez-vous s'il vous plaît partager un exemple sur jsfiddle .

niklasvh le 12 déc. 2017

Ce problème a été automatiquement fermé car il n'y a pas eu de réponse à notre demande d'informations supplémentaires de la part de l'auteur d'origine. Avec seulement les informations qui sont actuellement dans le problème, nous n'avons pas assez d'informations pour prendre des mesures. Veuillez nous contacter si vous avez ou trouvez les réponses dont nous avons besoin afin que nous puissions approfondir nos recherches.

no-response[bot] le 12 déc. 2017

Cher @niklasvh ,

Merci pour cette magnifique bibliothèque. Je suis capable de reproduire ce problème avec la dernière version - v1.0.0-rc.3

J'ai créé un exemple sur CodePen ici (Chrome uniquement) où vous verrez que certains des nœuds de texte (dans le titre du graphique) sont dupliqués.

Étapes à reproduire -

Veuillez ouvrir le lien CodePen - https://codepen.io/karannagupta/pen/RXpddB dans Chrome uniquement
Cliquez sur le bouton Copier dans le presse-papiers
Attendez la fin de l'animation (ou consultez la console pour le message copié)
Collez le graphique dans paint ou dans un document (ctrl + v)

Les titres des graphiques sont ajoutés sur la ligne 193

@hyojin , pouvez-vous rouvrir le problème s'il vous plaît ?

Salutations,
Karan

karannagupta le 10 sept. 2019

Salut @karannagupta
Pourriez-vous essayer ma branche pour vérifier si elle vient de la même raison ?

hyojin le 11 sept. 2019

Salut @hyojin

Avec votre version de la bibliothèque (v0.5.0-alpha2) cela ne fonctionne pas. Vous pouvez tester votre bibliothèque sur mon Pen ici

Aussi, j'aimerais utiliser la dernière version de html2canvas. Je n'ai pas non plus besoin d'utiliser html2canvas.svg alors.

Salutations,
Karan

karannagupta le 11 sept. 2019

Il s'avère que c'est un problème avec les polices Unicode

karannagupta le 11 sept. 2019

Cette page vous a été utile?

0 / 5 - 0 notes

Questions connexes

TypeError : Impossible de lire la propriété "pile" de null - v0.5.0-alpha1

wbarrantes · 3Commentaires

La répétition en arrière-plan ne fonctionne pas

anthonymejia · 4Commentaires

Le rendu SVG avec css intégré/externe ne fonctionne pas

arzyu · 3Commentaires

lors de l'utilisation de html2canvas, pourquoi l'image avec l'URL en ligne ne peut-elle pas apparaître dans le résultat, est-ce que quelqu'un le sait? s'il vous plaît dites-moi, merci!

Juliazhong · 4Commentaires

Les polices ne sont pas chargées lors de l'utilisation de html2canvas dans un iframe

diego-rey · 3Commentaires