Convert Text to Image using javascript [closed]

Answer 1

You need to use ImageMagick on your server side. Depending on what kind of framework you use, you may have to write some nice shell scripts.

OR

You can check this out:

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

Answer 2

You can do this using a hidden canvas element and converting that to an image using toDataURL. Your code would look something like this:

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 3

The canvas approach suggested by Amaan is definitely today's approach to generating images client-side.

In the past, the most common solution was to use a library like Cufon. From the Cufon wiki page on its usage comes this snippet:

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

Cufon generates the client-side version of the font up-front. This means it just adds static files on your web server, instead of generating the images on the web server (like with ImageMagick).