Add dynamic text to an image

Question

Add dynamic text to an image

I create a website for users where they can create logos. To do this, I need a tool to add dynamic text from text fields that the user will fill out, and then the text will appear on the selected image. Is there a way, say, for Javascript through which I can execute the script described above? Thank you for any suggestions on how I could do this.

My HTML so far:

<html> <body> <input type="text" id="submit"/> <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" /> </body>

and my jQuery:

 $('#submit').change(function() { $('#toChange').text( $('#submit').val()); });

but I have not succeeded yet.

+7

javascript jquery html dynamic

Dark knight Jul 16 '12 at 10:16

source share

1 answer

18bytes · Accepted Answer · 2012-07-16T10:20:58+0000

You can try the following:

Use HTML5 Canvas to render an image Example: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
At the top of the processed image, use the HTML5 Canvas API to draw the desired text with the necessary font attributes. Link: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Hope this is helpful.

Add dynamic text to an image

More articles: