Convertir texto en imagen usando javascript

Question

¿Hay alguna forma de convertir el texto de entrada en imagen? Lo que estoy tratando de hacer exactamente es escribir texto en el cuadro de texto y mostrarlo en div. Cuando hago clic en el botón, el texto copiado a div debe cambiarse a imagen. ¿Alguien sabe algo sobre esto? ¡Gracias por adelantado!

Answer 1

Puede hacerlo utilizando un elemento de lienzo oculto y convirtiéndolo en una imagen usando toDataURL. El código sería algo como esto:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas 
    imageElem = document.getElementById('image'); //Image element 
// Text input element 
document.getElementById('textInput').addEventListener('keyup', function(){ 
    tCtx.canvas.width = tCtx.measureText(this.value).width; 
    tCtx.fillText(this.value, 0, 10); 
    imageElem.src = tCtx.canvas.toDataURL(); 
    console.log(imageElem.src); 
}, false); 
​ 

Demo

Answer 2

Es necesario utilizar ImageMagick en su lado del servidor. Dependiendo del tipo de marco que use, puede que tenga que escribir algunos buenos scripts de shell.

O

Puede comprobar esto:

http://www.blitline.com/docs/functions

Answer 3

El enfoque sugerido por lienzo Amaan es sin duda el enfoque de hoy para la generación de imágenes del lado del cliente.

En el pasado, la solución más común era utilizar una biblioteca como Cufon. Desde el Cufon wiki page on its usage viene este fragmento:

<script type="text/javascript"> 
    Cufon.replace('h1'); // Works without a selector engine 
    Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above 
</script> 

Cufón genera la versión del cliente de la fuente por adelantado. Esto significa que simplemente agrega archivos estáticos en su servidor web, en lugar de generar las imágenes en el servidor web (como con ImageMagick).