Revolution X

Coding Community => Tutorials => Topic started by: Celebrus on May 27, 2009, 12:09:31 pm


Title: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on May 27, 2009, 12:09:31 pm
This tutorial will teach you how to create a signature with dynamic text using PHP with the GD library installed.

Preview -
 (http://aetus.net/tutorials/php/dynamic_sig/omikron/sig.png)
This was the original -
(http://aetus.net/tutorials/php/dynamic_sig/images/dragon.png)
The 'omikron' text on that was dynamically put there, so I can change it on the fly.

First you need an image to place text on. Once you have that, create a new php file with the usual tags.
Code: (php)
<?php

?>

Now lets get the text that we will use. I am going to place whatever text I receive through a GET variable.
Code: (php)
<?php

$str = $_GET['txt'];

?>

You might even want to secure the text that you receive, although I won't be doing that right now.
My signature is stored as 'images/dragon.png' relative to the PHP file. Let's load the image now.
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');

?>

You should also select the color you want. You can't use a hexadecimal value here, you will need the appropriate amounts of red, green and blue. The format for this function is imagecolorallocate($image, red, blue, green);

$image is the variable to which we are allocating the color to.
red, blue and green are the appropriate amounts of red blue and green you will use. I wanted a nice brownish color, so I used 226, 220, 210. These value are out of a total of 255. If all three are 255, the color will be white and if all of those are 0, the color would be black.

So now the code is -
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);

?>

Now select the font you want to use. I will use Palatino Linotype, which is located as 'fonts/pala.ttf' relative to the PHP file. Let's store this in a variable so that we can use it later. The font has to be a TTF font.
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';

?>

You also need the X and Y coordinates where your text will be placed. You will need to play around with these for a while. I ended up with 12(X) and 86(Y).
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';
$x = 12;
$y = 86;

?>

You also need to know the font size you are going to use. 10 fits in well for me.
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';
$x = 12;
$y = 86;
$size = 10;

?>

The last thing you need is the rotation of your text. This is in an anti-clockwise direction. I am leaving mine at 0.
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';
$x = 12;
$y = 86;
$size = 10;
$rotation = 0;

?>

Now we are ready to actually add the text. I will be using the imagettftext function for this.
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);
The parameters should be self-explanatory, since we already stored them in variables before.
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';
$x = 12;
$y = 86;
$size = 10;
$rotation = 0;
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);

?>

Now that we are done with the image, let's send it to the client.

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

The header('Content-Type: image/png'); is to tell the browser that we are sending an image.
imagepng($image); is to actually output the image.
imagedestroy($image); will just destroy the image since it has already been sent and isn't needed any more.

So the complete code for the image is -
Code: (php)
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('images/dragon.png');
$color = imagecolorallocate($image, 226, 220, 210);
$font = 'fonts/pala.ttf';
$x = 12;
$y = 86;
$size = 10;
$rotation = 0;
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

?>

If you saved this on your host as sigs/sig.php, you can access it like this:
http://YOURHOST/sigs/sig.php?txt=MyName (http://YOURHOST/sigs/sig.php?txt=MyName)

Now, the problem is that some forums don't allow you to add a signature image unless it ends with an image extension(PNG, GIF or JPEG). We can easily fix this using HTACCESS. Your host needs to have mod_rewrite enabled. Open your .htaccess file, or create one if it does not exist. It needs to be in the 'sigs' directory. On a new line, add -
Code:
RewriteEngine On
RewriteRule (.+)/sig.png sig.php?txt=$1

That way, you can access the image as
http://YOURHOST/sigs/MyName/sig.png (http://YOURHOST/sigs/MyName/sig.png)

The first line in the HTACCESS code simply enables the rewrite engine.
The second line is RewriteRule (.+)/sig.png sig.php?txt=$1.
RewriteRule - A new URL rewriting rule.
(.+)/sig.png - (.+) is a 'catch-all expression'. This represents what your URL will look like.
sig.php?txt=$1 - This represents what the actual file is. $1 is what was caught by the 'catch-all' expression above.

So, http://YOURHOST/sigs/Anything/sig.png will become the same as http://YOURHOST/sigs/sig.php?txt=Anthing

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on June 17, 2009, 05:30:01 am
Nice Guide.
But all of that explaining for that little thing?  O0

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on June 17, 2009, 05:46:18 am
I wouldn't say it's little. It saves a lot of time in the long run. Suppose I wanted to customize that sig for you, I wouldn't have to do anything but change the URL. xP

(http://aetus.net/tutorials/php/dynamic_sig/mojobojo82/sig.png)

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on June 17, 2009, 05:47:57 am
It's really helpful, you can do lots of things with GD. Think of this as a starting point for a new realm of possibilities.

This is something I used it for:
http://aetus.net/forum/index.php?topic=334.0
Hey, I should do one for RX too.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on June 17, 2009, 06:06:31 am
 :o Nice. Didn't think it was that easy XD looks very complicated.

Ahh... Too complicated for me :(

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on June 29, 2009, 07:19:21 pm
Few Question,
1.
How do you save it in your host?
I got it all now but idk how to save in host  ??? My host is SMF For Free, I bought a domain so my url is http://www.darkilscape.com
And btw what do I save it as?
I opened it put the code (below) and just saved it as .php on my Desktop.
Now what I do?


2.
This is my code, please tell me if theres anything wrong.
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('real darkilscape userbar.JPEG');
$color = imagecolorallocate($image, 255, 255, 255);
$font = 'fonts/VISITOR.FON';
$x = 275.0 px;
$y = 8.6 px;
$size = 15 pt;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: real darkilscape userbar.JPEG');
imagepng($image);
imagedestroy($image);

?>

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on June 30, 2009, 07:24:11 am
Sorry... But bump...
Rlly want this 2 work  :(

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on June 30, 2009, 08:12:33 am
You have to use a host that supports PHP and GD.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Agent Moose on June 30, 2009, 04:48:24 pm
For what you want to do with it, you can probably use http://ripway.com.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 01, 2009, 12:46:50 am
Ok cool, So my code is all good?
I'm just going to use the one SyntaxBlitz is using. http://darkilscape.hostoi.com/


And I saved the code on my desktop as DarkilscapeDynamicUserbar.PHP now i went on upload file through my CP, and uploaded it but it's named DarkilscapeDynamicUserbar.PHP.TxT... How I make it not .TxT... Coz it makes it open in a txt doc.
Note I'm using Windows Vista Home Premium

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on July 01, 2009, 05:02:50 am
in notepad while saving change the file type to 'all files'.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 01, 2009, 05:18:11 am
ohk thanks. Is my code all good?
Because it's all good and everything, but when i do the link it comes up with this.

PHP Error Message

Parse error: syntax error, unexpected T_STRING in /home/a6419915/public_html/DynamicDarkilscapeUserbar.PHP on line 7

Free Web Hosting

Just an image to show you :P
(http://i44.tinypic.com/muh34i.jpg)

Link - http://darkilscape.hostoi.com/DynamicDarkilscapeUserbar.PHP

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 01, 2009, 05:54:01 am
Sorry... But... Bump...
I realllllllllllllly want it...
It's just an error in the code I think.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 01, 2009, 07:19:30 am
You can't split a pixel in half. You also don't need the "px" at the end.
Do this:
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('real darkilscape userbar.JPEG');
$color = imagecolorallocate($image, 255, 255, 255);
$font = 'fonts/VISITOR.FON';
$x = 275;
$y = 9;
$size = 15 pt;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: real darkilscape userbar.JPEG');
imagepng($image);
imagedestroy($image);

?>

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 02, 2009, 12:49:09 am
Ahh still not working  :(

This is code-
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefrompng('real darkilscape userbar.JPG');
$color = imagecolorallocate($image, 255, 255, 255);
$font = 'fonts/VISITOR.FON';
$x = 275;
$y = 9;
$size = 15 pt;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: real darkilscape userbar.JPG');
imagepng($image);
imagedestroy($image);

?>

Same error aswell.

In my Pictures on my computer it says JPEG Image.
But when I uploaded to Photobucket, it said .JPG

I'm not sure :S

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Agent Moose on July 03, 2009, 07:30:23 am
I don't know much php, but I'm pretty sure these two lines can't have spaces in them, when your locating where your image file is.
Code:
$image = imagecreatefrompng('real darkilscape userbar.JPG');
header('Content-Type: real darkilscape userbar.JPG');

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 03, 2009, 07:57:12 am
The problem is, the error is showing up on line 7 :o

Also, I think the header is wrong.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 03, 2009, 04:06:14 pm
Ahh. So how do I fix it?

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on July 04, 2009, 11:18:37 am
make it this, you aren't supposed to change that.

header('Content-Type: image/jpg');

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 05, 2009, 12:40:41 am
Ahh ok!
Thanks for that.
I'll try it when I get home and reply what it says, I'm at my cousins house.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 05, 2009, 03:25:38 am
Ahh!
Now I get an error on line 4 .......
Heres link - http://darkilscape.hostoi.com/Real%20Darkilscape%20Userbar.PHP

Heres code -
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefromjpg('realdarkilscapeuserbar.jpeg');
$color = imagecolorallocate($image, 0, 0, 0);
$font = 'fonts/VISITOR.FON';
$x = 275;
$y = 9;
$size = 15;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

heheader('Content-Type: image/jpeg');
imagepng($image);
imagedestroy($image);

?>


Note In Andrew Kaldas/Pictures - It says it's a JPEG Image, But when I uploaded to Photobucket it said it's a JPG Image. So I think code is wrong, Can you guys check it.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 05, 2009, 07:54:01 am
Line 4 should be imagecreatefromjpeg("file"); not imagecreatefromjpg("file");

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 06, 2009, 02:14:13 am
Ahh!
Now i've got an error on line 7!

Code -
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefromjpeg("file");('realdarkilscapeuserbar.jpeg');
$color = imagecolorallocate($image, 0, 0, 0);
$font = 'fonts/VISITOR.FON';
$x = 275;
$y = 9;
$size = 15;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: image/jpeg');
imagepng($image);
imagedestroy($image);

?>

Link - http://darkilscape.hostoi.com/DynamicDarkilscapeUserbar.PHP

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on July 07, 2009, 04:48:11 am
$image = imagecreatefromjpeg("file");('realdarkilscapeuserbar.jpeg');

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 07, 2009, 04:59:25 am
I've got that on line 4.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Celebrus on July 07, 2009, 05:10:59 am
change it to this

$image = imagecreatefromjpeg('realdarkilscapeuserbar.jpeg');

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 07, 2009, 05:22:40 am
Argh!
Now errors on Line 4, 5 and 11!

Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefromjpeg('realdarkilscapeuserbar.jpeg');
$color = imagecolorallocate($image, 0, 0, 0);
$font = 'fonts/VISITOR.FON';
$x = 275;
$y = 9;
$size = 15;
$rotation = 0;
imagefontext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: image/jpeg');
imagepng($image);
imagedestroy($image);

?>

http://darkilscape.hostoi.com/DynamicDarkilscapeUserbar.PHP

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 07, 2009, 12:57:52 pm
Line 4 and 5 errors are because the image isn't uploaded to the server.
Line 11 is because the function is imagettftext, not imagefontext.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 08, 2009, 12:50:49 am
Argh!
I uploaded the pic to the site.

Now when I click the Dynamic Sig it just comes up with the link :(

http://darkilscape.hostoi.com/DynamicDarkilscapeUserbar.PHP

Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefromjpeg('properdarkilscapeuserbar.jpg');;
$color = imagecolorallocate($image, 0, 0, 0);
$font = 'fonts/VISITOR.FON';
$x = 310;
$y = 10;
$size = 15;
$rotation = 0;
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: image/jpg');
imagepng($image);
imagedestroy($image);

?>

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 08, 2009, 09:14:55 am
Code:
<?php

$str = $_GET['txt'];
$image = imagecreatefromjpeg('properdarkilscapeuserbar.jpg');
$color = imagecolorallocate($image, 0, 0, 0);
$font = 'fonts/VISITOR.FON';
$x = 310;
$y = 10;
$size = 15;
$rotation = 0;
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);

header('Content-Type: image/jpg');
imagejpeg($image);
imagedestroy($image);

?>

You need to upload the font too.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 08, 2009, 04:41:00 pm
Just uploaded the font.
Now it still has the link.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 08, 2009, 10:19:38 pm
It needs to be in the /fonts directory as stated in the code.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 08, 2009, 10:26:57 pm
So in /public_html I make a new folder named /fonts and upload it there?

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on July 08, 2009, 10:29:57 pm
Yes.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Mojobojo82 on July 08, 2009, 10:40:20 pm
Well I just made a new folder named Fonts and uploaded it..
Still says link

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Jish on August 22, 2009, 08:14:29 pm
I've got this for runescape signatures:)www.jish.ulmb.com/rs-sig/ But its not all that good.

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: Exilis on August 23, 2009, 10:51:01 am
Cool I have more RuneScape hiscores than I thought :D Even after the 2mil update...

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: KrylonKrystals on August 30, 2009, 09:25:03 pm
hmmm.. I was thinking this would be pretty helpful for my forum, If i were to try to make something out of this.. I can probably make a "preview of a Xbox Gamercard" like the hot shot forums :P Thanks for this :)

Quote from: Jish on August 22, 2009, 08:14:29 pm
I've got this for runescape signatures:)www.jish.ulmb.com/rs-sig/ But its not all that good.
Hey Jish if you can make it grab the stats of a rs accoutn you think you can help me grab the stats
of the "gamerscore and zone off a gamercard" ?

Title: Re: [PHP] Simple Dynamic Signature Tutorial
Post by: danny3153 on August 31, 2009, 06:18:18 pm
nice might use this


Powered by SMF | SMF © 2016, Simple Machines