Inserting text into an image with jQuery

I've been searching for a couple of hours now, and I still 开发者_如何学Pythoncan't seem to find a nice jquery plugin (or anything else), that would help me to insert the text into a picture.

I don't want the text to be "over" the image. I want that the text would become a part of an image. I will be using it to make motivational / demotivational posters online. Besides the text problem, I also can't figure out a way to make the black "padding".

I would really appreciate if you could give me some pointers or tips on how to approach this. Thank you!

jquery is for UI processing - that beaing, processing things at the user interface level - in the browser. What you want should be created on the server side - using PHPs imagemagick library for example

You will not be able to edit an image using javascript. You might have to use some server side language for image editing.

Have a look at Raphaël. You might need to dynamically load the image and create a new image as your output.

Otherwise, HTML 5 would be an option or a server side solution will be required as mentioned by the others.

If you have good HTML5 support this is possible using a Canvas element.

You can use:

ctx.drawImage(img, dx, dy);

to render the contents of an <img> tag into the canvas at a specified offset (to give you a border), and:

ctx.fillText(...);

to add your own text on top.

See the W3C spec.

If you don't have HTML5, it'll have to be done server-side.