Question

175

Adding dynamic text on image

rated 0 times [ 179] [ 4] / answers: 1 / hits: 22699 / 12 Years ago, mon, july 16, 2012, 12:00:00

I'm making a website for users where they can creat customize logos. For this I need a facility to add dynamic text from text boxes which the user will fill in and the text should then appear on the the selected image. Is there any way, say for Javascript, through which I can fulfill the above scenario? Would appreciate any suggestions of how i could do this.

My HTML so far is:

<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 haven't been succeed so far.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

answered 12 Years ago eanskylerg · Accepted Answer

You can try the following:

Use HTML5 Canvas to render your image Example: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

On top of the rendered image use the HTML5 Canvas API to draw the text you want with the required font attributes Reference: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Hope its useful.