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.
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.
Share Improve this question asked Jul 16, 2012 at 10:16 Dark KnightDark Knight 1371 gold badge3 silver badges10 bronze badges 6- If you're generating your image with PHP, you will have to pass the textbox values to the script and then reload the generated image. You could use an AJAX call to send the text and receive back a new URL for the image. – Alex Commented Jul 16, 2012 at 10:19
- You mean you want the text to appear over the image, or actually be saved as a file with that text over it? JavaScript can't do the latter - you'd need something like PHP GD – Mitya Commented Jul 16, 2012 at 10:19
- 1 Ah, you want to do something like www.cooltext. then. – arttronics Commented Jul 16, 2012 at 10:23
- @Utkanos Yes, I'm concerned with the latter scenario. Is this one related to image processing? – Dark Knight Commented Jul 16, 2012 at 10:39
- Yes - you would have to handle the image, and the superimposition of text onto it, on the server, via something like GD. If this is acceptable, reply and I'll post an answer showing how this is done (will be later today, though) – Mitya Commented Jul 16, 2012 at 10:44
1 Answer
Reset to default 10You can try the following:
- Use HTML5 Canvas to render your image Example: http://www.html5canvastutorials./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/en/Drawing_text_using_a_canvas
Hope its useful.