Html2canvas: Problema de fonte Unicode

@ ramesh-git Parece ser mesmo um _BUG html2canvas_.

Fiz um teste com o "fillText" e não tive problemas, mas ao usar o "html2canvas". Alguns personagens foram substituídos por um desenho estranho (um círculo para ser exato).

A única solução rápida que você pode especificar:

você deve criar uma tela de seus textos antes de executar html2canvas e colocá-los sobrepostos aos textos originais (usando position: absolute; e os textos originais devem receber visibility: hidden; - pode ter que colocar o texto dentro de tags de span e estes as tags span devem ser ocultadas.), ao executar o callback onreaded você remove (ou oculta) a tela (textos).

Nota: Lembre-se, sempre que você fizer uma pergunta que usará o código "do lado do cliente", adicione um exemplo online usando sites como http://html2canvas.hertzen.com/ (adicionei um exemplo à sua pergunta, por isso ser mais fácil para os desenvolvedores.)

Exemplo de fillText:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
  background:#ccc;
}
canvas{
  background:#fff;
}
</style>
<canvas id="e" width="600" height="200"></canvas>
<h1 id="a1">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</h1>
<script>
    var canvas = document.getElementById("e");
    var a1 = document.getElementById("a1");

    var context = canvas.getContext("2d");
        context.fillStyle = "#000";
        context.font = "bold 16px Arial";
        context.fillText(a1.innerHTML, 10, 20);
</script>

Exemplo de bug html2cavans:
http://jsfiddle.net/6KvLk/

Eu descobri o motivo da falha:
Na função renderText(el, textNode, stack) , para ser mais específico na linha: 1186 :
temos este: : textNode.nodeValue.split(""); (esta divisão é para caracteres normais)

Para o "texto unicode", você precisa adicionar a propriedade text-align (css) com um dos seguintes valores: left , right e justify .

Nota: e não use a propriedade letter-spacing :

Experimentar:

<h1 id="a1"><span style="text-align:justify;">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</span></h1>
<script>
    var a1 = document.getElementById("a1");
    html2canvas(a1,{
        "onrendered":function(canvas){
            document.body.appendChild(canvas);
        }
    });
</script>

muito obrigado ao brcontainer.
Quando vi a postagem dele, pensei em tentar alguma manipulação de código e funcionou perfeitamente. A resposta é substituir:

textList = (! options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing (getCSS (el, "letterSpacing")))

com:

textList = (! options.letterRendering || /^(left|right|justify|auto)$/.test(textAlign) || noLetterSpacing (getCSS (el, "letterSpacing")))

observe o sinal (&&) que é substituído por (||).

@BENYAZ Para o seu problema (# 289), uma solução mais limpa não seria apenas alterar left|right|justify|auto para left|right|center|justify|auto ? Suspeito que sua solução alternativa pode quebrar ou tornar a renderização significativamente lenta em alguns casos de uso.

@BENYAZ funciona para os meus idiomas (pashto e urdu). Obrigado

@BENYAZ também funciona para mim na língua persa

@BENYAZ sim, também confirmo trabalhando em árabe e persa.

Está funcionando em dari
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)? getWords (caracteres): characters.map (function (character)
Eu mudei && para ||

@BENYAZ Está funcionando na língua Bangla. obrigado

Irmão firafiul , como você resolveu esse problema? Isso é ir para um arquivo para alterar as linhas? Eu tentei várias versões de html2canvas.js, mas não encontrei nenhuma linha para substituir (que será substituída por novas linhas).

Encontre a seguinte linha no arquivo
textList =!

Substituir com:

textList = (! options.letterRendering |||

** No lugar de &&. Vai.

@rafiul , irmão você não entendeu minhas palavras. O arquivo que chamei de html2canvas.js não contém esta linha . ))) "
É difícil fazer upload do arquivo html2canvas.js?

@IbnAhmed Baixe aqui: http://3rwebtech.com/html2canvas.js

firafiul , muito obrigado mano :)

@rafiul Por favor, compartilhe o arquivo html2canvas.js. obrigado

@rafiul Por favor, compartilhe o arquivo html2canvas.js. O link anterior não está funcionando. obrigado

@hiroksarker faça o download aqui, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

mesmo problema comigo .... alguma ajuda por favor?

definir css: espaçamento entre letras: 0;
options = {letterRendering: true}

na nova versão deve mudar esta linha:

var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) &&! hasUnicode (container.node.data);

com isso:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data);

Corrigi este problema, use css 'word-wrap: normal; '

como ,<div style = "word-wrap: normal;"> Seu texto here</div>