Adding dynamic text on image
21,298
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.
Author by
Dark Knight
Updated on July 17, 2020Comments
-
Dark Knight almost 4 years
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.
-
Mitya almost 12 yearsAll good points - but the OP wants to save the image file with the text on it, I think. -
18bytes almost 12 years@Utkanos and user1528490 You can save the Canvas contexts as an image file. Example here: html5canvastutorials.com/advanced/…. Hope it helps!
-
Kurtis92 over 8 yearsAbout save and download canvas as image, take a look here: jsfiddle.net/softvar/5hnyf
