How to Create Dynamic Images in PHP

From WikiHTP

There is a set of functions that allow us to create an image file (jpg, png, gif, etc.) on the server and then send it to the browser that requested it. That is to say, with PHP, we can not only make dynamic pages but also dynamic images.

Generate Dynamic Image[edit]

Let's see a simple and useful example where to apply the generation of a dynamic image. Almost all of us have seen that the sites force us to enter a verification code to register to an Internet service. It is usually a graphic with a series of numbers and letters that are not very readable (this is done to confirm that the person entering the data is a human being and not a computer program).

This type of problem is very well adapted to employ the creation of dynamic images. Let's see the code that allows us to solve this problem:

<?php
    $width = 100;
    $height = 30;
    $image = imageCreate ($width, $height);
    $yellow = ImageColorAllocate ($image, 255,255.0);
    ImageFill ($image, 0,0, $yellow);
    $red = ImageColorAllocate ($image, 255,0,0);
    $rand = rand (100000,999999);
    ImageString ($image, 5,25,5, $rand, $red);
    for ($c = 0; $c <= 5; $c ++)
    {
        $x1 = rand (0, $width);
        $y1 = rand (0, $height);
        $x2 = rand (0, $width);
        $y2 = rand (0, $height);
        ImageLine ($image, $x1, $y1, $x2, $y2, $red);
    }
    Header ("Content-type: image / jpeg");
    ImageJPEG ($image);
    ImageDestroy ($image);
?>

The first thing to keep in mind is that the file is pure PHP, that is, it does not have HTML outputs, this is because it is an image that is generated and not an HTML file. Then we will see that this image can be incorporated into an HTML file and be part of an IMG tag.

The first thing we do is call the imageCreate function, passing as parameters the width and height of the image to be created.

    $width = 100;
    $height = 30;
    $image = imageCreate ($wide, $tall);

The imageCreate function returns a reference to the image; which we will use in all other functions.

Next, we acquire a reference to color and fill the background of the image with this color.

    $yellow = ImageColorAllocate ($image, 255,255.0);
    ImageFill ($image, 0,0, $yellow);

The ImageColorAllocate function has as parameters the reference to the created image and the three values that indicate the amount of red, green and blue for the mixture.

The ImageFill function fills with color from the coordinates that we passed in the second and third parameters.

So far we have a rectangle of 100x30 pixels of yellow color. To draw the verification code we have.

    $red = ImageColorAllocate ($image, 255,0,0);
    $rand = rand (100000,999999);
    ImageString ($image, 5,25,5, $rand, $red);

Recall that the rand function returns a random value between the two values that we pass as a parameter. Next, with the ImageString function, we print the number generated in red at coordinates 25.5 and with a font size of 5 (possible font values are from 1 to 5).

We have drawn the verifier code (in our case it is a verifying number, since we have not incorporated characters) now to make it more difficult to read the number we will incorporate a series of segments that partially cover the random number:

    for ($c = 0; $c <= 5; $c ++)
    {
        $x1 = rand (0, $width);
        $y1 = rand (0, $height);
        $x2 = rand (0, $width);
        $y2 = rand (0, $height);
        ImageLine ($image, $x1, $y1, $x2, $y2, $red);
    }

We have to draw 6 lines. To graph the lines we call the ImageLine function that has four fundamental parameters that are the coordinates of the two points of origin and end of the line. As we know the width and height of the image and for the line to be within the limits of the graph, we have as a maximum value the values stored in $width and $height.

Even here the image is in memory, we must also indicate what format it will have and send it to the client who requested it.

    Header ("Content-type: image / jpeg");
    ImageJPEG ($image);
    ImageDestroy ($image);

Also in this type of tutorial, we need the header function (remember that we use it in the redirect) We indicate the type of file that the browser will receive. In this case, we call the ImageJPEG function (we could also call ImagePNG, ImageGIF, etc.) that generates the information of the image itself and finally call the ImageDestroy function to free the resources occupied in the server by this generation process from the image.

For the correct functioning of the graphics functions, we must activate the PHP extensions that allow this functionality, for this we must activate from the WampServer the extension php_gd2.

About This Tutorial

This page was last edited on 18 February 2019, at 21:26.