Html2canvas: Las etiquetas de texto en SVG se superponen (duplicadas / duplicadas)

Creado en 19 feb. 2015 · 24Comentarios · Fuente: niklasvh/html2canvas

(Lo siento, no soy bueno en inglés)

Hola,
Estoy usando este impresionante script para renderizar etiquetas SVG
Hay algo de texto superpuesto cuando renderizo la etiqueta de texto en SVG en el lienzo
La etiqueta de texto se procesará como un nodo de texto y también como SVG
Puedes ver eso fácilmente con la propiedad transform
2015-02-19 15 08 29_2
Aquí hay un código de muestra (con 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

Y aqui esta mi cambio rapido

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

Espero que esto sea de ayuda

Needs More Information

Fuente

hyojin

👍4 ❤2

Comentario más útil

@hyojin
Después de probarlo en IE, su solución no funciona porque la propiedad parentElement no se completa en el nodo actual. ¡Utilice parentNode lugar! En cualquier caso, será más claro porque estamos en el NodeParser y hablamos de nodo.

De lo contrario, en lugar de probar el nombre de la etiqueta, cambio mi código para probar la instancia de parentNode y procesar que el nodo actual tenga un TextContainer solo si el parentNode no es un SVGElement .

Funciona en Chrome e IE11. en Firefox no puedo probarlo debido a un error de lienzo en blanco.

Mi código

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

Espero que esto ayude.

ncoquelet en 6 ago. 2015

❤2

Todos 24 comentarios

Gracias # Hyojin. Eso me ayuda.

josnabattula en 17 mar. 2015

Gracias, ayúdame mucho!

natee en 23 jul. 2015

¡Gracias por tu corrección!

también puede comprobar tspan tagName:
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName! == "text" && node.parentElement.tagName! == "tspan"

ncoquelet en 4 ago. 2015

👍1

@ncoquelet Actualicé mi código . ¡Gracias!

hyojin en 5 ago. 2015

Funciona en Chrome e IE11. en Firefox no puedo probarlo debido a un error de lienzo en blanco.

Mi código

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

Espero que esto ayude.

ncoquelet en 6 ago. 2015

❤2

soluciono mi problema de firefox, también funciona en ff :-)

ncoquelet en 6 ago. 2015

¡Mas claro!
También verifiqué que funciona bien en ff.
Fusioné tu corrección y se actualizó la solicitud de extracción. Gracias :)

hyojin en 12 ago. 2015

👍1

@hyojin @ncoquelet gracias por la investigación de esto y la solución. Me encontré exactamente con el mismo problema el otro día y no estaba completamente seguro de qué lo estaba causando.

berendberendsen en 17 jul. 2016

😄1

No estoy seguro de dónde me estoy confundiendo aquí, pero obtengo la excepción como "Error de referencia no detectado: NodeParser no está definido"

Suchetana10 en 2 ago. 2016

@ Suchetana10 ¿ Cuándo recibió la excepción? en el script de carga?

hyojin en 5 ago. 2016

@hyojin gracias ... funcionó para mí

vishwasvadavi en 25 oct. 2016

@hyojin gracias! funciona perfectamente para mi tambien

nugen en 13 feb. 2017

happyvishwasvadavi ugnugen ¡Estoy feliz de escuchar eso! :)

hyojin en 14 feb. 2017

Algunas personas todavía tienen el problema con el elemento de texto, cambio este problema abierto y enviaré PR nuevamente.

hyojin en 14 feb. 2017

seemasingh123 en 25 feb. 2017

¿Alguien tiene una compilación de la biblioteca con esta solución que pueda probar? Viendo el mismo problema en la página de highcharts.

theinventor en 24 mar. 2017

¿Esta compilación está disponible con la corrección? Todavía me enfrento a este problema con highcharts.

Nywlem11 en 2 ago. 2017

¿Esta corrección está disponible en la compilación o tenemos que crear una anulación?

sgsmittal en 12 oct. 2017

¿Sigue siendo un problema con la v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle .

niklasvh en 12 dic. 2017

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese con nosotros si tiene o encuentre las respuestas que necesitamos para que podamos investigar más.

no-response[bot] en 12 dic. 2017

Estimado @niklasvh ,

Gracias por esta increíble biblioteca. Puedo reproducir este problema con la última versión: v1.0.0-rc.3

He creado un ejemplo en CodePen aquí (solo Chrome) donde verá que algunos de los nodos de texto (en el título del gráfico) están duplicados.

Pasos para reproducir -

Abra el enlace CodePen: https://codepen.io/karannagupta/pen/RXpddB solo en Chrome
Haga clic en el botón Copiar al portapapeles
Espere a que termine la animación (o consulte la consola para ver el mensaje copiado)
Pegar el gráfico en pintura o en un documento (ctrl + v)

Los títulos de los gráficos se agregan en la línea # 193

@hyojin , ¿podrías volver a abrir el problema?

Saludos,
Karan