Html2canvas: Problema de fuente Unicode

Creado en 10 jun. 2013  ·  21Comentarios  ·  Fuente: niklasvh/html2canvas

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.
screenshot-7

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

Bug Unicode

Comentario más útil

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

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

Todos 21 comentarios

@ 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 recibir visibility: 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ón onreaded 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

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>

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

tibewww picture tibewww  ·  4Comentarios

anthonymejia picture anthonymejia  ·  4Comentarios

ABHIKSINGHH picture ABHIKSINGHH  ·  3Comentarios

yasergh picture yasergh  ·  5Comentarios

Loki180 picture Loki180  ·  4Comentarios