Generating a "What is your IP" Image

[KentonBomb]

I originally posted this in my blog, but here is a tutorial for all you who want it
Note: This is very long

Since I made my sig tell people their IP Address, some people have asked me "How does it do it?"

Well, This is to clear that up, and show you how to make your own!

This tutorial is based off of a tutorial by Dethredic, but this generates the image by itself.

First of all, this is what the end result will be:



This is generated by the web-based scripting language known as PHP. You must have PHP installed on your server for this tutorial to work.

If you are not experienced with PHP, This tutorial will be confusing. So I would suggest you find some beginner tutorials first.

First, open your PHP code with

<?Php

Now to add the first line.

<?php
$img = imagecreate(220, 20);

Simple. Loads the initial "image" into memory. The variable $img will be used alot later on. The image is 220x20 Pixels

The next part initializes the different colors needed to print onto the image. We will be using White, and Green.

<?
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);

This might look a little complicated, but let me break it down.

$white declares the variable for you. The ImageColorAllocate function simply turns an RGB value into a variable ($white, $green) That can be referenced later.

The 3 parameters after the $img variable declares how much of each color (Red, Green, Blue, RGB) you want for that color. For a darker green, I want 0 Red, 150 Green, and 0 Blue. The maximum for that is 255. Don't ask me why. I have no idea If you wanted a purple color, you could say you wanted 150 Red, 150 Blue, and 0 Green. The combonations are endless.

Now, we move on.

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);

You can see we now added an ImageFill. Do i need to explain that?

"But what are the 0, 0 for?"
That is the X and Y coordinates to where you want to start filling the image. If you chose 10, 10, you would have a 10 Pixel line at the edge and the top of the image not filled. We want the whole image filled, so we picked 0, 0, or the upper left hand corner of the image.

Now we must obtain the IP address. That is by using this little enviorment variable called REMOTE_ADDR.

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);
$ip = $_SERVER["REMOTE_ADDR"];

You use the $_SERVER variable to declare enviormental variables. Nifty, Huh? Well, this then stores the IP Address of the client into the $ip variable. We will use this in the next step: Getting the next onto the image.

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);
$ip = $_SERVER["REMOTE_ADDR"];
imagestring($img, 4, 2, 2,  "$ip is your ip :P", $white);

We used a function called "ImageString". It... Writes a string in the image. We used the string "$ip is your ip" with a smiley on the end. The "4" declares the font size. The 2 "2"'s are the positioning of the text. The $white simply declares we are using the color "White" as previously declared.

Now you have the completed image in memory. We want it to display on a page though. So we must change the header of the PHP file. We do this by adding this line:

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);
$ip = $_SERVER["REMOTE_ADDR"];
imagestring($img, 4, 2, 2,  "$ip is your ip :P", $white);
header("Content-type: image/png");

This makes your web browser look at the file like a PNG image. It still doesn't show up though, so we must bring it out of memory, and onto our page.

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);
$ip = $_SERVER["REMOTE_ADDR"];
imagestring($img, 4, 2, 2,  "$ip is your ip :P", $white);
header("Content-type: image/png");
imagepng($img);

And that displays the image proudly. We just close the PHP file with this final, completed code:

<?php   
$img = imagecreate(220, 20);
$white = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 0, 150, 0);
imagefill($img, 0, 0, $green);
$ip = $_SERVER["REMOTE_ADDR"];
imagestring($img, 4, 2, 2,  "$ip is your ip :P", $white);
header("Content-type: image/png");
imagepng($img);
 ?>

Now, upload that to your webserver as [Anything].php. Now you can use it with an HTML IMG tag, or a BBCode IMG tag.

Note: Some forums don't allow dynamic images with PHP extensions. To get around this, make the img tag point to:

http://example.com/blah.php/whatever.png

It doesn't matter what the name after the PHP url is. It will treat it just the same

I hope you enjoyed this tutorial, and you learned something while you were at it

[Jesse]

Wow, thanks for this tutorial.