JN Boards: Php With Mod_gd - JN Boards

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

Php With Mod_gd Work in Progress

#1 User is offline   iXn 

  • Member
  • PipPip
  • Group: Members
  • Posts: 26
  • Joined: 12-October 09
  • Gender:Male
  • Location:i dunno lol

Posted 13 October 2009 - 05:35 PM

This is a tutorial for PHP using mod_gd. The GD library is a library for manipulating images easily. It can be used to create dynamic images like ones that will show your IP. We assume you are using the most recent 5.x version of PHP and most recent version of the GD Library at the time of writing. I will get specifics back to you later. I cannot help you so please do not ask. If you know nothing of PHP, I cannot help you there either and this is useless to you.

Chapter 1

Getting Started

Since you already have an environment that you can use, lets start off. First, we need to create an image resource. This resource can be used to manipulate the image. This is the base of every use, at least in most cases. There are other kinds of functions that make new images, but for now we will use it.

$imageResource = ImageCreate($sizex, $sizey);


Size x is the x value of the image in pixels. Size y is the y value in pixels. When using functions that require pixel positions, understand that the positions start at 0, not 1. Now that we have the image resource, lets learn some basic manipulations you can do. Lets say $sizey = 20 and $sizex = 20. To shorten it, just use 20 for both, although applying them to a variable will be useful if you use the size in large amounts of places.

$colourResource = ImageColorAllocate($imageResource, $red, $green, $blue);
$colourResource2 = ImageColorAllocate($imageResource, $red, $green, $blue);


As you may guess, this adds a colour you can use on the image. It is considered an int if you were wondering. $red, $green, and $blue are the Red, Green, and Blue values of the colours. This allows you to have 16777216 colours in your palette. You should save the return value for later use, as you will use it in most drawing functions. For our purpose, lets say all three values are 255, and the other set is 0. Also, lets not use individual colour variables. Replace the first colour allocation with $col[0] and $col[1] for the other. Use $col = array(255, 0); There is also another colour allocation tool which lets you add alpha, but we'll get onto that later.

ImageFill($imageResource, 0, 0, $colourResource2);


This will fill the image with black (the colour we allocated) at 0, 0. Think of MS Paint's paint bucket.

ImageLine($imageResource, 0, 0, 19, 19, $colourResource);


The first argument in this function is an image resource to draw on. This function draws a line. The first value is the starting x, next is starting y, next is ending x, and next is ending y. This would draw a diagonal line from top left to bottom right. The last value is a colour resource.

header("Content-type: image/png");
ImagePNG($imageResource);
ImageDestroy($imageResource);


The header() tells the receiving client they will receive a PNG image, otherwise it would not work. ImagePNG() outputs the image as a PNG, and ImageDestroy() removes the image to free resources used by it.

This is what your code should look like:

$col = array(255, 0);

$imageResource  = ImageCreate(20, 20);
$colourResource  = ImageColorAllocate($imageResource, $col[0], $col[0], $col[0]);
$colourResource2 = ImageColorAllocate($imageResource, $col[1], $col[1], $col[1]);

ImageFill($imageResource, 0, 0, $colourResource2);
ImageLine($imageResource, 0, 0, 19, 19, $colourResource);

header("Content-type: image/png");
ImagePNG($imageResource);
ImageDestroy($imageResource);


What it should look like:

http://img.amiret.us/ex.png

Chapter 2

Okay, so it seems it worked out OK! Now, that example is actually pretty useless. But, how about we do some basic dynamic text on the image? We'll be displaying the user's IP. Now, lets start off with the following code that we should know:

$image = ImageCreate(80, 15);
$colour = array(ImageColorAllocate($image, 0, 0, 0), ImageColorAllocate($image, 255, 255, 255), ImageColorAllocate($image, 127, 127, 127));

ImageFill($image, 0, 0, $colour[1]);

header("Content-type: image/png");
ImagePNG($image);
ImageDestroy($image);


This part will be actually fairly short, only teaching two new functions. Now, lets start with getting the IP address of who's viewing it. Insert this on the 3rd line and add a new line.

$IP = $_SERVER['REMOTE_ADDR'];


This is the person's IP. Simple as that. How about we show it? Insert this after ImageFill()

ImageString($image, 2, 1, 1, $IP, $colour[0]);


You can't set a font with this function (you have to use another). The second argument is the size. I'm not too sure on how large in pixels each size, but just experiment. Third and fourth arguments are the x and y position of the top left corner of the text. The 5th is your text, and the last is the colour to print it in. Now, lets draw a rectangle around it just for fun.

ImageRectangle($image, 0, 0, 79, 14, $colour[2]);


ImageRectangle draws the border of a rectangle from starting points in arguments 2 and 3 to the points in 4 and 5. Last is, of course, the colour to draw it in. Put this on the line after ImageString. Your code should look like this:

$image = ImageCreate(80, 15);
$colour = array(ImageColorAllocate($image, 0, 0, 0), ImageColorAllocate($image, 255, 255, 255), ImageColorAllocate($image, 127, 127, 127));
$IP = $_SERVER['REMOTE_ADDR'];

ImageFill($image, 0, 0, $colour[1]);
ImageString($image, 2, 3, 1, $IP, $colour[0]);
ImageRectangle($image, 0, 0, 79, 14, $colour[2]);


header("Content-type: image/png");
ImagePNG($image);
ImageDestroy($image);


This should be your result:

http://img.amiret.us/ex2.png

Glossary

resource ImageCreate(int x, int y);
- Returns an image resource to be manipulated

int ImageColorAllocate(resource $image, int $r, int $g, $b);
- Returns an int colour that can be used in drawing for the image specified as argument 1.

bool ImageFill(resource $image, int $x, int $y);
- Fills the image. Returns if it worked or not.

bool ImageLine(resource $image, int $startx, int $starty, int $endx, int $endy, int $colour);
- Returns true or false based on success or failure. Starts at startx, starty, ends at the endx and endy points. Uses whatever colour is specified.

bool ImageRectangle(resource $image, int $startx, int $starty, int $endx, int $endy, int $colour);
- Returns true or false based on success or failure. Starts at startx, starty, ends at the endx and endy points. Uses whatever colour is specified.

bool ImageString(resource $image, int $size, int $startx, int $starty, string $text, int $colour);
- Returns true or false based on success or failure. Writes text at given position using size specified. Uses whatever colour is specified.

bool ImagePNG(resource $image);
- Returns true or false based on success or failure. Outputs the image in PNG form to the browser.

bool ImageDestroy(resource $image);
- Returns true or false based on success or failure. Removes the image to relieve resources.

Did I miss something? Please post if there are any errors or strange things in this tutorial.

To be continued (in this topic)...

This post has been edited by iXn: 14 October 2009 - 02:13 PM


#2 User is offline   AlexM 

  • JN Devotee
  • PipPipPipPipPip
  • Group: Active Members
  • Posts: 293
  • Joined: 03-March 08
  • Gender:Male
  • Location:Sillicon Valley

Posted 13 October 2009 - 08:05 PM

*gasp* I've been looking for a tutorial for this for AGES! :o I finally found it.
Thanks, iXn, I'll definately be waiting for this guide to be continued...
So dynamic PNGs will also create things like JN's AC counter, those images that say where you live near, kind of like "random images", right?

#3 User is offline   iXn 

  • Member
  • PipPip
  • Group: Members
  • Posts: 26
  • Joined: 12-October 09
  • Gender:Male
  • Location:i dunno lol

Posted 14 October 2009 - 01:48 PM

View PostAlexM, on Oct 13 2009, 11:05 PM, said:

*gasp* I've been looking for a tutorial for this for AGES! :o I finally found it.
Thanks, iXn, I'll definately be waiting for this guide to be continued...
So dynamic PNGs will also create things like JN's AC counter, those images that say where you live near, kind of like "random images", right?

Yes. The only thing that makes me sad that there isn't animated .gif support for PHP GD yet. Annoying. YOU WILL ALSO NOTE THAT MY AVATAR ROTATES RANDOMLY.

This post has been edited by iXn: 14 October 2009 - 02:22 PM


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users