Html2canvas: Text-Tags in SVG überlappen (dupliziert / verdoppelt)

Erstellt am 19. Feb. 2015 · 24Kommentare · Quelle: niklasvh/html2canvas

(Entschuldigung, ich bin nicht gut in Englisch)

Hallo,
Ich verwende dieses tolle Skript, um SVG-Tags zu rendern
Es gibt einige Textüberlappungen, wenn ich das Text-Tag in SVG auf Leinwand rendere
Text-Tag wird als Text-Knoten und auch als SVG verarbeitet
Sie können das leicht mit der Eigenschaft transform sehen
2015-02-19 15 08 29_2
Hier ist Beispielcode (mit 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

Und hier ist mein schnelles Wechselgeld

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

Ich hoffe das wird helfen

Needs More Information

Quelle

hyojin

👍4 ❤2

Hilfreichster Kommentar

@hyojin
Nachdem Sie es im IE getestet haben, funktioniert Ihr Fix nicht, da die Eigenschaft parentElement auf dem aktuellen Knoten nicht aufgefüllt ist. Verwenden Sie stattdessen parentNode ! Auf jeden Fall wird es klarer, weil wir uns mit NodeParser und über Knoten sprechen.

Ansonsten teste ich stattdessen den Tag-Namen, ändere meinen Code, um die Instanz von parentNode zu testen und zu verarbeiten, dass der aktuelle Knoten ein TextContainer nur wenn der parentNode kein SVGElement .

Es funktioniert auf Chrome und ie11. Auf Firefox kann ich es wegen eines Blank Canvas-Fehlers nicht testen!

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

Ich hoffe das hilft.

ncoquelet am 6. Aug. 2015

❤2

Alle 24 Kommentare

Danke #Hyojin. Das hilft mir.

josnabattula am 17. März 2015

Danke, hilf mir sehr!

natee am 23. Juli 2015

Danke für deine Korrektur!

Sie können auch tspan tagName überprüfen:
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet am 4. Aug. 2015

👍1

@ncoquelet Ich habe meinen Code aktualisiert. Vielen Dank!

hyojin am 5. Aug. 2015

Es funktioniert auf Chrome und ie11. Auf Firefox kann ich es wegen eines Blank Canvas-Fehlers nicht testen!

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

Ich hoffe das hilft.

ncoquelet am 6. Aug. 2015

❤2

Fix mein Firefox-Problem, funktioniert auch auf ff :-)

ncoquelet am 6. Aug. 2015

Klarer!
Ich habe auch überprüft, ob es auf ff gut funktioniert.
Ich habe Ihren Fix zusammengeführt und die Pull-Anfrage wurde aktualisiert. Vielen Dank :)

hyojin am 12. Aug. 2015

👍1

@hyojin @ncoquelet danke für die Untersuchung und den Fix. Ich bin neulich auf genau das gleiche Problem gestoßen und war mir nicht ganz sicher, was es verursacht hat.

berendberendsen am 17. Juli 2016

😄1

Ich bin mir nicht sicher, wo ich hier verwirrt bin, aber ich erhalte die Ausnahme als "Uncaught ReferenceError: NodeParser ist nicht definiert"

Suchetana10 am 2. Aug. 2016

@Suchetana10 Wann hast du die Ausnahme bekommen? im Ladeskript?

hyojin am 5. Aug. 2016

@hyojin danke .. hat für mich funktioniert

vishwasvadavi am 25. Okt. 2016

@hyojin danke! funktioniert bei mir auch einwandfrei

nugen am 13. Feb. 2017

happyvishwasvadavi ugnugen Das freut mich zu hören! :)

hyojin am 14. Feb. 2017

Einige Leute haben immer noch das Problem mit dem Textelement, ich ändere dieses Problem geöffnet und werde erneut PR senden.

hyojin am 14. Feb. 2017

seemasingh123 am 25. Feb. 2017

Hat jemand einen Build der Bibliothek mit diesem Fix darin, den ich testen kann? Das gleiche Problem wird auf der Highcharts-Seite angezeigt.

theinventor am 24. März 2017

Ist dieser Build mit dem Fix verfügbar? Ich habe immer noch dieses Problem mit Highcharts.

Nywlem11 am 2. Aug. 2017

Ist dieser Fix im Build verfügbar oder müssen wir eine Überschreibung erstellen?

sgsmittal am 12. Okt. 2017

Ist das immer noch ein Problem mit v1.0.0 ? Wenn ja, könnten Sie bitte ein Beispiel für jsfiddle teilen .

niklasvh am 12. Dez. 2017

Dieses Problem wurde automatisch geschlossen, da unsere Anfrage nach weiteren Informationen vom ursprünglichen Autor nicht beantwortet wurde. Wir haben nur die Informationen, die derzeit in der Ausgabe enthalten sind, und wir haben nicht genügend Informationen, um Maßnahmen zu ergreifen. Bitte wenden Sie sich an uns, wenn Sie die benötigten Antworten haben oder finden, damit wir weitere Nachforschungen anstellen können.

no-response[bot] am 12. Dez. 2017

Lieber @niklasvh ,

Vielen Dank für diese tolle Bibliothek. Ich kann dieses Problem mit der neuesten Version reproduzieren - v1.0.0-rc.3

Ich habe hier ein Beispiel für CodePen erstellt (nur Chrome), in dem Sie sehen, dass einige der

Schritte zum Reproduzieren -

Bitte öffnen Sie den CodePen-Link - https://codepen.io/karannagupta/pen/RXpddB nur in Chrome
Klicken Sie auf die Schaltfläche In die Zwischenablage kopieren
Warten Sie, bis die Animation beendet ist (oder sehen Sie sich die Konsole für die kopierte Nachricht an)
Fügen Sie das Diagramm in Farbe oder ein Dokument ein (Strg + V)

Die Diagrammtitel werden in Zeile Nr. 193 hinzugefügt

@hyojin , würdest du das Problem bitte noch einmal öffnen?

Grüße,
Karan

karannagupta am 10. Sept. 2019

Hallo @karannagupta
Könnten Sie es mit meiner Filiale versuchen, um zu überprüfen, ob es aus demselben Grund stammt?

hyojin am 11. Sept. 2019

Hallo @hyojin

Mit Ihrer Version der Bibliothek (v0.5.0-alpha2) funktioniert es nicht. Hier können Sie Ihre Bibliothek auf meinem Stift testen

Außerdem möchte ich die neueste Version von html2canvas verwenden. Ich brauche html2canvas.svg dann auch nicht.

Grüße,
Karan

karannagupta am 11. Sept. 2019

Es stellt sich heraus, dass es sich um ein Problem mit Unicode-Schriftarten handelt

karannagupta am 11. Sept. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Html2canvas: Text-Tags in SVG überlappen (dupliziert / verdoppelt)

Hilfreichster Kommentar

Alle 24 Kommentare

Verwandte Themen