Hola a todos,
En mi código HTML existe algo de contenido UNICODE. Si intento convertir de HTML a Canvas, se generan caracteres basura. Usé datos de UNICODE tamil.
encontrar la captura de pantalla de mi contenido HTML.
¿Puede dar alguna solución? Necesito esto urgente.
Responda a cualquiera lo antes posible.
Gracias y Saludos,
Ramesh
@ ramesh-git Parece ser realmente un _BUG html2canvas_ incluso.
Hice una prueba con "fillText" y no tuve problemas, pero al usar "html2canvas". Hubo algunos personajes que fueron reemplazados por un dibujo extraño (un círculo para ser exactos).
La única solución rápida que puede especificar:
debe crear un lienzo de sus textos antes de ejecutar html2canvas y colocarlos superpuestos a los textos originales (usando
position: absolute;
y los textos originales deben recibirvisibility: hidden;
- es posible que tenga que poner el texto dentro de las etiquetas span y estas Las etiquetas span deben estar ocultas.), cuando ejecuta la devoluciónonreaded
llamada lienzo (textos).Nota: Recuerde, siempre que haga una pregunta que utilice código "del lado del cliente", agregue un ejemplo en línea usando sitios como http://html2canvas.hertzen.com/ (agregué un ejemplo a su pregunta, por lo que será más fácil para los desarrolladores).
Ejemplo 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>
ejemplo de error html2cavans:
http://jsfiddle.net/6KvLk/
Descubrí la razón del fracaso:
En la función renderText(el, textNode, stack)
, para ser más específicos en la línea: 1186 :
tenemos esto: : textNode.nodeValue.split("");
(esta división es para caracteres normales)
Para el "texto unicode", debe agregar la propiedad text-align
(css) con uno de los siguientes valores: left
, right
y justify
.
Nota: y no use la propiedad
letter-spacing
:
Tratar:
<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>
muchas gracias a brcontainer.
Cuando vi su publicación, pensé en probar algo de manipulación de código y funcionó de manera increíble. La respuesta es reemplazar:
textList = (! options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing (getCSS (el, "letterSpacing")))
con:
textList = (! options.letterRendering || /^(izquierda|derecha|justificar|auto)$/.test(textAlign) || noLetterSpacing (getCSS (el, "letterSpacing")))
aviso en el signo (&&) que se reemplaza por (||).
@BENYAZ Para su problema (# 289), ¿no sería una solución más limpia simplemente cambiar left|right|justify|auto
a left|right|center|justify|auto
? Sospecho que su solución podría romperse o ralentizar significativamente el procesamiento para algunos casos de uso.
@BENYAZ me funciona en los idiomas (pashto y urdu). Gracias
@BENYAZ también me funciona en persa
@BENYAZ sí, también confirmo que funciona en árabe y persa.
Funciona en Dari
var textList = (! this.options.letterRendering || noLetterSpacing (contenedor)) || ! hasUnicode (container.node.data)? getWords (caracteres): characters.map (función (carácter)
Cambié && a ||
@BENYAZ Está funcionando en idioma
firafiul Hermano, ¿cómo
Busque la siguiente línea en el archivo
textList =!
Reemplazar con:
textList = (! options.letterRendering |||
** En lugar de &&. Será.
@rafiul , hermano, no entendiste mis palabras. El archivo que he denominado html2canvas.js no tiene esta línea . ))) "
¿Es difícil cargar su archivo html2canvas.js?
@IbnAhmed Descarga desde aquí: http://3rwebtech.com/html2canvas.js
firafiul , muchas gracias hermano :)
@rafiul ¿Podría compartir el archivo html2canvas.js? Gracias
@rafiul ¿Podría compartir el archivo html2canvas.js? El enlace anterior no funciona. Gracias
@hiroksarker descárgalo desde aquí, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0
mismo problema conmigo .... alguna ayuda por favor?
establecer css: espaciado entre letras: 0;
opciones = {letterRendering: true}
en la nueva versión debería cambiar esta línea:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (contenedor)) &&! hasUnicode (contenedor.node.data);
con este:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (contenedor)) || ! hasUnicode (container.node.data);
Solucioné este problema, use css 'word-wrap:
normal; '
como ,<div
style = "word-wrap: normal;"> Su texto here</div>
Comentario más útil
Solucioné este problema, use css
'word-wrap:
normal; 'como
,<div
style = "word-wrap: normal;"> Su textohere</div>