1

I want to add editable text (with font selection) to an image using jquery and want this to be saved as a new image.

Can someone give me some examples or opensource tools for this?

To Explain further, jquery would be used to write text and select font over an image and in the server side PHP can be used to save the new image. I have already developed some server side coding to do the same but looking for a jquery solution for the front end.

Improve this question
4
  • This will not be possible with jQuery/javascript alone as it has no image manipulation or file IO capabilities. Commented May 8, 2012 at 10:15
  • @RoryMcCrossan This is not possible with javascript alone. I have already created PHP scripts on the server side to save new image. I want Jquery to select position on the image to add text, select font and while saving it needs to send x,y coordinates of the added text for PHP to save that as a new image. Commented May 8, 2012 at 10:23
  • In that case see Robbie's answer. Commented May 8, 2012 at 10:24
  • @RoryMcCrossan I am looking for a non-HTML5 solution as HTML5 is not supported by all browsers. Commented May 8, 2012 at 10:26

1 Answer 1

Reset to default
2

The only way you can do this is to use canvas and "save as image", but canvas is not well supported - so if a public website then not recommended. Link: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Otherwise you need to do as two separate actions - write the text for display as jQuery, then recreate the image using GD library in PHP. You'll struggle to get them identical, but they can get pretty close.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I am not looking for HTML5 solution as it is not supported by all browsers... I already have the server side script with imagemagick php to add the text to an image and save as a new image
In which case you've basically done the work (and the only solution open to you). Have two seaparate actions. That's the system used at revealyoursoftside.com - you can see the Text written on screen is in Javascript, but the final product (actually a video) is through PHP creating individual images. Sorry, but there's not any other shortcut you can use to "screen grab" the javascript output without canvas. Having said that....
There is one way we investigated - that's to set up a server running a webbrowser to mimic what's going on on the user's screen, and then using tools on the webserver to screen grab the browser; hopefully this is the same as the user's browser. You can only "copy" one at a time (so you need to queue the requests). We dropped that idea as unfeasable. But that's an option if absolutely required!
Actually we dont have to copy the screenshot. This is my thinking. We already have some tools for cropping an image using jquery. If we can use the same method to place a text, we can get the x,y corrdinates for that text in that image. Using these coordinates, PHP can write the final output as image
We are looking for something like a business card editor where users are writing on a predefined templates.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.