Html2canvas: Tags de texto em sobreposição SVG (duplicado / dobrado)

Criado em 19 fev. 2015  ·  24Comentários  ·  Fonte: niklasvh/html2canvas

(Desculpe, eu não sou bom em inglês)

Olá,
Estou usando este script incrível para renderizar tags SVG
Há alguma sobreposição de texto quando eu renderizo a tag de texto em SVG para tela
A tag de texto pode ser processada como um nó de texto e também como SVG
Você pode ver isso facilmente com a propriedade transform
2015-02-19 15 08 29_2
Aqui está um exemplo de código (com 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

E aqui está minha mudança rápida

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 isso ajude

Needs More Information
Fonte
picture hyojin
👍4 ❤2

Comentários muito úteis

@hyojin
Depois de testá-lo no IE, sua correção não funciona porque a propriedade parentElement não está preenchida no nó atual. Use parentNode vez disso! Em qualquer caso, ficará mais claro porque estamos no NodeParser e ele fala sobre o nó.

Caso contrário, em vez de testar o nome da tag, eu mudo meu código para testar a instância de parentNode e processo o nó atual tem um TextContainer apenas se o parentNode não for um SVGElement .

Ele funciona em cromo e ie11. no firefox eu não posso testá-lo por causa do bug da tela em branco!

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

Eu espero que isso ajude.

picture ncoquelet em 6 ago. 2015
❤2

Todos 24 comentários

Obrigado # Hyojin. Isso me ajuda.

josnabattula picture josnabattula em 17 mar. 2015

Obrigado, me ajude muito!

natee picture natee em 23 jul. 2015

Obrigado pela sua correção!

você também pode verificar no tspan tagName:
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName! == "text" && node.parentElement.tagName! == "tspan"

ncoquelet picture ncoquelet em 4 ago. 2015
👍1

@ncoquelet Eu atualizei meu código . Obrigado!

hyojin picture hyojin em 5 ago. 2015

@hyojin
Depois de testá-lo no IE, sua correção não funciona porque a propriedade parentElement não está preenchida no nó atual. Use parentNode vez disso! Em qualquer caso, ficará mais claro porque estamos no NodeParser e ele fala sobre o nó.

Caso contrário, em vez de testar o nome da tag, eu mudo meu código para testar a instância de parentNode e processo o nó atual tem um TextContainer apenas se o parentNode não for um SVGElement .

Ele funciona em cromo e ie11. no firefox eu não posso testá-lo por causa do bug da tela em branco!

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

Eu espero que isso ajude.

ncoquelet picture ncoquelet em 6 ago. 2015
❤2

consertar meu problema do firefox, funciona no ff também :-)

ncoquelet picture ncoquelet em 6 ago. 2015

Mais claro!
Também verifiquei se funciona bem no ff.
Eu mesclei sua correção e a solicitação de recebimento foi atualizada. Obrigado :)

hyojin picture hyojin em 12 ago. 2015
👍1

@hyojin @ncoquelet obrigado pela investigação e pela correção. Eu encontrei exatamente o mesmo problema outro dia e não tinha certeza do que estava causando isso.

berendberendsen picture berendberendsen em 17 jul. 2016
😄1

Não tenho certeza de onde estou ficando confuso aqui, mas estou recebendo a exceção como "Uncaught ReferenceError: NodeParser is not defined"

Suchetana10 picture Suchetana10 em 2 ago. 2016

@ Suchetana10 Quando você obteve a exceção? no carregamento do script?

hyojin picture hyojin em 5 ago. 2016

@hyojin obrigado .. funcionou para mim

vishwasvadavi picture vishwasvadavi em 25 out. 2016

@hyojin obrigado! funciona perfeitamente para mim também

nugen picture nugen em 13 fev. 2017

happyvishwasvadavi ugnugen Fico feliz em ouvir isso! :)

hyojin picture hyojin em 14 fev. 2017

Algumas pessoas ainda têm o problema com o elemento de texto, eu altero este problema aberto e enviarei PR novamente.

hyojin picture hyojin em 14 fev. 2017

image

seemasingh123 picture seemasingh123 em 25 fev. 2017

Alguém tem uma versão da biblioteca com essa correção que eu possa testar? Encontrando o mesmo problema na página de gráficos altos.

theinventor picture theinventor em 24 mar. 2017

Esta compilação está disponível com a correção? Ainda estou enfrentando esse problema com gráficos altos.

Nywlem11 picture Nywlem11 em 2 ago. 2017

Esta correção está disponível no build ou temos que criar uma substituição?

sgsmittal picture sgsmittal em 12 out. 2017

Isso ainda é um problema com a v1.0.0 ? Em caso afirmativo, você poderia compartilhar um exemplo no jsfiddle .

niklasvh picture niklasvh em 12 dez. 2017

Este problema foi encerrado automaticamente porque não houve resposta ao nosso pedido de mais informações do autor original. Com apenas as informações que estão atualmente no problema, não temos informações suficientes para tomar medidas. Entre em contato se tiver ou encontre as respostas de que precisamos para que possamos investigar mais a fundo.

no-response[bot] picture no-response[bot] em 12 dez. 2017

Caro @niklasvh ,

Obrigado por esta biblioteca incrível. Consigo reproduzir este problema com a versão mais recente - v1.0.0-rc.3

Eu criei um exemplo no CodePen aqui (apenas Chrome), onde você verá que alguns dos nós de texto (no título do gráfico) estão duplicados.

Passos para reproduzir -

  1. Abra o link CodePen - https://codepen.io/karannagupta/pen/RXpddB apenas no Chrome
  2. Clique no botão Copiar para a área de transferência
  3. Aguarde a conclusão da animação (ou consulte o console para ver a mensagem copiada)
  4. Cole o gráfico no desenho ou documento (ctrl + v)

Os títulos dos gráficos são adicionados na Linha # 193

@hyojin , poderia abrir o problema novamente?

Cumprimentos,
Karan


text-duplication
karannagupta picture karannagupta em 10 set. 2019

Oi @karannagupta
Você poderia tentar meu branch para verificar se vem pelo mesmo motivo?

hyojin picture hyojin em 11 set. 2019

Oi @hyojin

Com a sua versão da biblioteca (v0.5.0-alpha2) não funciona. Você pode testar sua biblioteca na minha caneta aqui

Além disso, gostaria de usar a versão mais recente do html2canvas. Eu também não preciso usar html2canvas.svg então.

Cumprimentos,
Karan

karannagupta picture karannagupta em 11 set. 2019

Acontece que é um problema com fontes Unicode

image

karannagupta picture karannagupta em 11 set. 2019
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

tibewww picture tibewww  ·  4Comentários
ABHIKSINGHH picture ABHIKSINGHH  ·  3Comentários
wbarrantes picture wbarrantes  ·  3Comentários
stevencherry1 picture stevencherry1  ·  3Comentários
tjchambers32 picture tjchambers32  ·  3Comentários