Olá a todos,
No meu código HTML existe algum conteúdo UNICODE. Se tento converter de HTML para Canvas, estou gerando caracteres inúteis. Eu usei dados UNICODE tamil.
encontrar a captura de tela do meu conteúdo HTML.
Você pode dar alguma solução. Eu preciso disso urgente.
Por favor, responda a qualquer pessoa o mais rápido possível.
Obrigado e cumprimentos,
Ramesh
@ 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 recebervisibility: hidden;
- pode ter que colocar o texto dentro de tags de span e estes as tags span devem ser ocultadas.), ao executar o callbackonreaded
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>
Comentários muito úteis
Corrigi este problema, use css
'word-wrap:
normal; 'como
,<div
style = "word-wrap: normal;"> Seu textohere</div>