[PHP] Simple Dynamic Signature Tutorial

[Celebrus]

This tutorial will teach you how to create a signature with dynamic text using PHP with the GD library installed.

Preview -
 
This was the original -

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

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

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

[Mojobojo82]

Nice Guide.
But all of that explaining for that little thing? 

[Celebrus]

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

[Exilis]

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.

[Mojobojo82]

  Nice. Didn't think it was that easy XD looks very complicated.

Ahh... Too complicated for me

[Mojobojo82]

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);

?>

[Mojobojo82]

Sorry... But bump...
Rlly want this 2 work 

[Exilis]

You have to use a host that supports PHP and GD.

[Agent Moose]

For what you want to do with it, you can probably use http://ripway.com.

[Mojobojo82]

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

[Celebrus]

in notepad while saving change the file type to 'all files'.

[Mojobojo82]

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


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

[Mojobojo82]

Sorry... But... Bump...
I realllllllllllllly want it...
It's just an error in the code I think.

[Exilis]

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);

?>

[Mojobojo82]

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