Change text of an image

Hai everybody

I wish to change the text of an jpg/gif image from javascript

that means i get some text from the user and i wish to set this new text on the image where the old text contains with the same effect of old text of image.

what to do for it.

pls help me.

with regards
asarjas

it is my emergency need

If the text is a part of the image ie: pixels/bitmap you will have some serious difficulty changing it with javascript. The best you could do is open the JPG in an image editing program, clone out the text and then use a combination of CSS and Javascript to super impose text over the top. This probably wont help you if the text uses a decorative font. You could resort to Flash if you need to use a specialty font.

I tried to do in flash using the flash script it is working.

but my need is

I have an image with text having some effects. I create a page and put image , textbox and button. After the user enter the text and click button. Then the text in image will change.but it must have the old text effects.

what to do

regards
asarjas

What sort of effects are we talking about?

emboss,texture applying, color gradiant, outlining and more.

If suppos i dont need to do this effects then it will be possible to me. Also i did it just using some layers using css and javscript in html.

But i dont know how we put effects. For example the image had the text as "BABLU" with embedding, texture and outling effects which is developed in photoshop. In our page we enter the text in the textbox and click the button. then the new text will replace the old text. But the new text have the old text's effects. That's all i need. i don't a way to do this. Help me please.

with regards
asarjas

Hmmm ... that could be quite tricky.
You can do this inside of Photoshop CS3
using a feature called Smart Objects.

However you would need Photoshop server or
other third party *expensive* software to produce
the effect on the web.

Which brings us back to Flash. You might be able to use
variable text in flash with a bitmap fill. You could include
some effects like drop shadow blur etc.

Hai Thanks for your reply.

But I achieve the target using flash. But I dont want to include in my page as swf. I need it as animated gif/jpg/png formate. In flash i use textbox and button whithin the flash. Ok fine. If i export that as animated gif the file is fully running. There is no time to give input and click on button.

I explain it breefly. I use an image, variable text, input text and button for this. First the image and the variable text with some text is displayes. I asking them if they wish they can able to change the text. Then user give input and submit it. The new text will replace the old text with the same effect of old one. If it will be a swf format it will working fine. But i need it as animated gif/jpg/png formate. in these there is no time to enter the input. it is going onl running. What to do to stop and give input and change the text.

Also I wish to ask you as do you know about filter

with regards
asarjas

I seem to recall hearing about people using ImageMagick with PHP. Perhaps it could be used to do this. (Don't ask me how though.)

You can convert Flash content to a JPG or a PNG using the JPGEncoder and PNGEncoder classes which come with Adobes corelib package.
It is hosted with google code here. I am sure you can apply filters to the text after it is entered using Actionscript You just might have to apply it to a bitmapData object first.

I found this thread as I was searching for the same sort of solution. The difference is that I will not require a large assortment of design styles but can stick to basic font type and minimal size change. I would like to find a solution that can allow my customers overlay text in a template design and then save it as a jpeg. I am a designer with a fair amount of web experience but I am really looking for a solution that is viable and easy to use for the novice. That is why I am limiting the changes to the image. I am looking for substitution rather than design. any help would be greatly appreciated

Thanks
R

The only ways I can think of to do this is either using a server side technology like PHP or ActionScript in Flash. Both require some programming skills. Do you know and Actionscript or PHP?

Perhaps if you used Cascading Style Sheets to position your text on top of your template you might be able to use a firefox plug-in to save the page as a jpg. Then you could use a minimal amount of javascript to dynamically set your text.