Convert Text to Image using javascript [closed]

Is there any way I can convert the input text into an image. What I am exactly trying to do is type some text into a textbox and display it on div. When I click on a button the text copied to div should be changed to an image. Does anyone know anything about this? Thanks in advance!



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();
}, false);



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

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


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.


You can check this out:


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.