I’m trying to create a form where the content I enter is printed on to an image (saving me altering it in Photoshop every time I need to modify it).
I’ve set up the form with input fields and a form, and need to now find a script that just pastes my input onto the image.
See image below for reference and my form for info:
2
Answers
CSS method
html:
jquery:
PHP method
html:
toimage.php:
You can do the whole thing completely client side, using canvas and a bit of JS.
First, get your canvas and context references:
Use
drawImage
to draw the template image into the canvas:Next, use
fillText
to add your text in the right place on the canvas:Finally, use a bit of code to download the resulting image:
Here’s the JSFiddle to this sample.