Form Text to appear on an image as text.

  • socal_kL
  • Newbie
  • Newbie
  • socal_kL
  • Posts: 6

Post 3+ Months Ago

Hello,

First off new to the forums, like it so far alot of info. If you go to the link below I've provided it shows how someone can type text into an input box and then submit it and have it appear on the image for a preview of what the real thing looks like. I do alot of ecommerce work and one of my clients wants something like this. I'm not even sure where to go to get/buy the code for this. thanks in advance

Link ref: http://www.thingsremembered.com/webapp/ ... =ClickInfo


Cheers
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RedBMedia
  • Proficient
  • Proficient
  • User avatar
  • Posts: 315

Post 3+ Months Ago

This is a good question that I have consider in the past as well. I am looking for something in PHP. i kow it can be done i am just not really sure how. Does anyone have an answer on this?
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

As long as your version of PHP supports the GD library, there are plenty of things you can do with images in PHP:

http://us.php.net/image
  • RedBMedia
  • Proficient
  • Proficient
  • User avatar
  • Posts: 315

Post 3+ Months Ago

ok, so i just ran a simple script based on the example given in the link that you provided spork, and surprisingly it worked really well! However, I am curious how to select varibles like font, size, color, and position on the image. Below is my code:

PHP Code: [ Select ]
 
<?php
 
 
 
header("Content-type: image/png");
 
$string = "This is a test";
 
$im     = imagecreatefrompng("test.png");
 
$orange = imagecolorallocate($im, 220, 210, 60);
 
$px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
 
imagestring($im, 3, $px, 9, $string, $orange);
 
imagepng($im);
 
imagedestroy($im);
 
 
 
?>
 
 
  1.  
  2. <?php
  3.  
  4.  
  5.  
  6. header("Content-type: image/png");
  7.  
  8. $string = "This is a test";
  9.  
  10. $im     = imagecreatefrompng("test.png");
  11.  
  12. $orange = imagecolorallocate($im, 220, 210, 60);
  13.  
  14. $px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
  15.  
  16. imagestring($im, 3, $px, 9, $string, $orange);
  17.  
  18. imagepng($im);
  19.  
  20. imagedestroy($im);
  21.  
  22.  
  23.  
  24. ?>
  25.  
  26.  
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

I haven't actually done a whole lot of image work in PHP, so I'm probably not the best person to help you with that.

Have you tried looking for tutorials and/or demos of specific functionality online?
  • Tannu4u
  • Proficient
  • Proficient
  • User avatar
  • Posts: 480
  • Loc: India

Post 3+ Months Ago

Hey it does not does it for every product, for eg: jewellery's, it just displays the text on a background image. So i guess you should Google for GD libs in php and you will definitely get what you are searching for.

Regards,
Amit
  • RedBMedia
  • Proficient
  • Proficient
  • User avatar
  • Posts: 315

Post 3+ Months Ago

i am currently working on a solution to this.....I will post what i find when i finish.
  • dogbert
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Tacoma, WA

Post 3+ Months Ago

There's an eays way to do that but its kinda cheating and you wont get a look like that but very easy to make and if well done well can turn out good.

takes 2 pages, used html, css, asp (vb) (really quick example)
Code: [ Select ]

******* home.html ********
<body>
<FORM action=glass.asp>
<h2><input type=text name=text> From: [text you want on picture]*</h2>
<h2><input type=submit name=submit value=Generate><input type="reset" value="Clear All" /></h2>
</FORM></body>
******** glass.asp ********
<%@ Language=VBScript %>
<HTML>
<HEAD>
    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</HEAD>
<BODY>
<div id="pic">
    <img src="pic.jpg" width="200px" height="200px"/>
</div>
<div id="text">
         <h1 align="center"><%=request("text")%></h1>
</div>
********** style.css ************
h1 {font family: "Comic Sans MS", Times New Roman; /*or whatever font you want *?
    font-size: 14px;
    color: red;}

#pic  {position: absolute;
       z-index: 0;
       left: 175px;
       top: 60px;
       width: 200px;
       height: 200px;
       padding: 0px;}

#text  {position: absolute;
       z-index: 5;
       left: 50px;
       top: 50px;
       width: 100px;
       height: 100px;
       padding: 0px;}
  1. ******* home.html ********
  2. <body>
  3. <FORM action=glass.asp>
  4. <h2><input type=text name=text> From: [text you want on picture]*</h2>
  5. <h2><input type=submit name=submit value=Generate><input type="reset" value="Clear All" /></h2>
  6. </FORM></body>
  7. ******** glass.asp ********
  8. <%@ Language=VBScript %>
  9. <HTML>
  10. <HEAD>
  11.     <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  12. </HEAD>
  13. <BODY>
  14. <div id="pic">
  15.     <img src="pic.jpg" width="200px" height="200px"/>
  16. </div>
  17. <div id="text">
  18.          <h1 align="center"><%=request("text")%></h1>
  19. </div>
  20. ********** style.css ************
  21. h1 {font family: "Comic Sans MS", Times New Roman; /*or whatever font you want *?
  22.     font-size: 14px;
  23.     color: red;}
  24. #pic  {position: absolute;
  25.        z-index: 0;
  26.        left: 175px;
  27.        top: 60px;
  28.        width: 200px;
  29.        height: 200px;
  30.        padding: 0px;}
  31. #text  {position: absolute;
  32.        z-index: 5;
  33.        left: 50px;
  34.        top: 50px;
  35.        width: 100px;
  36.        height: 100px;
  37.        padding: 0px;}

the idea is that it puts what the user typed in a div right on top of the picture wherever you want it, you pretty much only get to use whatever font the user has and flat colors but with a clever layout it can look pretty good.
i can make a working example later if you really want.
  • RedBMedia
  • Proficient
  • Proficient
  • User avatar
  • Posts: 315

Post 3+ Months Ago

dogbert wrote:
There's an eays way to do that but its kinda cheating and you wont get a look like that but very easy to make and if well done well can turn out good.

takes 2 pages, used html, css, asp (vb) (really quick example)
Code: [ Select ]

******* home.html ********
<body>
<FORM action=glass.asp>
<h2><input type=text name=text> From: [text you want on picture]*</h2>
<h2><input type=submit name=submit value=Generate><input type="reset" value="Clear All" /></h2>
</FORM></body>
******** glass.asp ********
<%@ Language=VBScript %>
<HTML>
<HEAD>
    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</HEAD>
<BODY>
<div id="pic">
    <img src="pic.jpg" width="200px" height="200px"/>
</div>
<div id="text">
         <h1 align="center"><%=request("text")%></h1>
</div>
********** style.css ************
h1 {font family: "Comic Sans MS", Times New Roman; /*or whatever font you want *?
    font-size: 14px;
    color: red;}

#pic  {position: absolute;
       z-index: 0;
       left: 175px;
       top: 60px;
       width: 200px;
       height: 200px;
       padding: 0px;}

#text  {position: absolute;
       z-index: 5;
       left: 50px;
       top: 50px;
       width: 100px;
       height: 100px;
       padding: 0px;}
  1. ******* home.html ********
  2. <body>
  3. <FORM action=glass.asp>
  4. <h2><input type=text name=text> From: [text you want on picture]*</h2>
  5. <h2><input type=submit name=submit value=Generate><input type="reset" value="Clear All" /></h2>
  6. </FORM></body>
  7. ******** glass.asp ********
  8. <%@ Language=VBScript %>
  9. <HTML>
  10. <HEAD>
  11.     <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  12. </HEAD>
  13. <BODY>
  14. <div id="pic">
  15.     <img src="pic.jpg" width="200px" height="200px"/>
  16. </div>
  17. <div id="text">
  18.          <h1 align="center"><%=request("text")%></h1>
  19. </div>
  20. ********** style.css ************
  21. h1 {font family: "Comic Sans MS", Times New Roman; /*or whatever font you want *?
  22.     font-size: 14px;
  23.     color: red;}
  24. #pic  {position: absolute;
  25.        z-index: 0;
  26.        left: 175px;
  27.        top: 60px;
  28.        width: 200px;
  29.        height: 200px;
  30.        padding: 0px;}
  31. #text  {position: absolute;
  32.        z-index: 5;
  33.        left: 50px;
  34.        top: 50px;
  35.        width: 100px;
  36.        height: 100px;
  37.        padding: 0px;}

the idea is that it puts what the user typed in a div right on top of the picture wherever you want it, you pretty much only get to use whatever font the user has and flat colors but with a clever layout it can look pretty good.
i can make a working example later if you really want.


I am not sure exactly how this would work for socal_kL but i am actually trying to make an image, not just thrown text on top of one!
  • socal_kL
  • Newbie
  • Newbie
  • socal_kL
  • Posts: 6

Post 3+ Months Ago

ive been searching for possibly a software but nothing found yet. anyone else come across anything?


cheers
  • socal_kL
  • Newbie
  • Newbie
  • socal_kL
  • Posts: 6

Post 3+ Months Ago

Tannu4u wrote:
Hey it does not does it for every product, for eg: jewellery's, it just displays the text on a background image. So i guess you should Google for GD libs in php and you will definitely get what you are searching for.

Regards,
Amit



can you clarify what to search for a little more. thanks
  • dogbert
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Tacoma, WA

Post 3+ Months Ago

Quote:
socal_kL but i am actually trying to make an image, not just thrown text on top of one!

yeah I know just though I would throw it out there as a option, best way I can think of for getting that result would be to give every letter a value and have 26 picture (every letter of the alphabet however you want it to look) a corespoinding value, so when the user types there message it takes out the text and puts in pictures. but thats a beyond what I can do.
  • socal_kL
  • Newbie
  • Newbie
  • socal_kL
  • Posts: 6

Post 3+ Months Ago

dogbert wrote:
yeah I know just though I would throw it out there as a option, best way I can think of for getting that result would be to give every letter a value and have 26 picture (every letter of the alphabet however you want it to look) a corespoinding value, so when the user types there message it takes out the text and puts in pictures. but thats a beyond what I can do.


thats the solution i've come up with as well was just defining each individual letter as a picture and giving it a value. problem is, im a designer not a programmer so i can only come up with the idea not actually program it. ive been looking into the gdlib alot but hard to comprehend. dogbert, that example you laid out for me where the text just goes over the image. that COULD work for a temp solution. how would i go about using that for more then just one product though? thanks in advance for any replies.

cheers
  • dogbert
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Tacoma, WA

Post 3+ Months Ago

Easyest way to use it for multiple products is have multiple display pages, so the main page could be layed out as it appears in your example when customizing it shows Flute #1 and #2 below, in your case it could be product #1 above and #2 below, so you make a <form> to hold in input and submit button for each product. quick ex.
<h1>Product #1</h1>
<form action=vb\prod1.asp>
<input type=text name=text>(type text you wont here)
<input type=submit name=submit value=submit>
</form>
<h1>Product #2</h1>
<form action=vb\prod2.asp>
<input type=text name=text>type text you wont here (max 15 letters)
<input type=submit name=submit value=submit>
</form>
and so on for however many products you want on a single page.

then each asp page (prod1, prod2, etc.) is spacific to the product, so prod1 holds the image of product 1 with the text div placed via css where you want it on the product. and so on for the other products.

main problem that will come up is users putting in to many letters to fit in the space, you can list as I did in the example how many letters will fit but after that you need a more complicated solution to limit it, such as making the main products page an .asp and then using something like
<form runat=server>
<asp:TextBox id=prod1 runat=server/>
<asp:RangeValidator id="product1" runat="server"
ControlToValidate="prod1" Type="Integer"
MinimumValue="1" MaximumValue="15" Display="Dynamic">
text you want (min 1, max 15)
</asp:RangeValidator>
<input type=submit OnServerClick="Submit_Click" value="submit" runat=server>
with that it would no longer need the 2nd page to show the text over picture as the server can place it on the same page wherever you want when they click submit.
  • socal_kL
  • Newbie
  • Newbie
  • socal_kL
  • Posts: 6

Post 3+ Months Ago

hey ive been doing alot more research into this thinking it could possibly be a software application. im looking into IBMs WebSphere ... anyone think I could be right. Only problem is that theres multiple software options for web sphere, if anything thinks im onto the right thing, what software do you think I could roll with.


cheers

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.