Browse by title articles:

Storage and re-use of images using PHP/GD - Part I

by Gijs van Tulder    

Publishing images on the web is nice, but tedious. It would be nice if we could use a system that automates the uploading, storage, converting and resizing of our images. We could feed that system our images once, and retrieve them later in many different formats. In this article, we will write some scripts that come close to this ideal system. PHP and the GD-library will provide us with an easy method of uploading, searching and publishing our images.

This article is an extension of an earlier article, which described how to write a script that can resize and convert images on the fly. You will need that script here.

We want to have a system that we can use to:

1. upload and store our images
2. search our image database
3. publish our images on our web site
4. maintain a central list of alt-tags.

We also want our system as flexible as possible. To make it easy to use, it has to accept and convert the following range of image types: jpeg, gif, png, bmp. Those formats have to be converted to jpeg and png, and stored for later use. When retrieving our images, it would be nice if we could resize them as we need.

In this first of two instalments, we will build the scripts that upload, convert and store the images. In the second instalment, we will write a simple search function and the image retrieval-part.

The mission described above can be accomplished using the following open-source tools and libraries:

• PHP, compiled with the GD-library, MySQL and jpeg-support
• a working MySQL-server for storing the image info
• a working instance of the image conversion and resizing script I described in this article
• the following converters found in the netpbm-toolkit: bmptoppm, , pngtopnm, pnmtopng, ppmtogif
• the gif2png utility.

You can compile your own versions of these conversion utilities. You can also download the binary versions I compiled for Linux i386 (97 kB download).

When uploading, we will store the image information in a MySQL-table for later use. In the database, we will store the following information:

• the filename of the image (the generated 13 character name)
• the image type (jpeg or png)
• the image width and height
• the size of the image in bytes
• the title of the image for our own search purposes
• a description of the image, also to search and find
• the alt-tag of the image, to display when publishing the image.

Create the database using the following SQL-query.

CREATE TABLE images (
  img_id mediumint(9) NOT NULL auto_increment,
  img_file varchar(13) NOT NULL default '',
  img_type enum('JPG','PNG') NOT NULL default 'JPG',
  img_height smallint(6) NOT NULL default '0',
  img_width smallint(6) NOT NULL default '0',
  img_bytes mediumint(9) NOT NULL default '0',
  img_title tinytext NOT NULL,
  img_descr mediumtext NOT NULL,
  img_alt tinytext NOT NULL,
  PRIMARY KEY  (img_id)
) TYPE=MyISAM;

In this first instalment, we will write the scripts that handle the uploading, converting and storing of the image. We will concentrate on the scripting; you can design your own interface.

The user will fill in a simple html-form to add an image to the database. Save this form as upload.html.

<form enctype="multipart/form-data" method="post"
action="upload.php">
<b>Upload image</b><br>
Select image: <input name="file" type="file"><br>
Title: <input name="title" type="text"><br>
Description: <textarea
name="descr"></textarea><br>
Alt-text: <input name="alt" type="text"><br>
<input type="submit" value="Upload">
</form>

The form is sent to upload.php. Save the script as upload.php.

// define the base image dir 
$base_img_dir = "./img/";

// define location of image conversion programs
$img_conv_dir = "./bin/";

// define database table containing image info
$img_table = "images";

// connect with database
mysql_connect("yourhost", "youruser", "yourpass");
mysql_select_db("yourtable");

// generate unique id for use in filename
$uniq = uniqid("");

// new file name
$filename = $base_img_dir.$uniq;

// move uploaded file to destination
move_uploaded_file($HTTP_POST_FILES["file"]["tmp_name"],$filename);

First, we generate a 13 characters long, unique name for our image. This name will be used to save the image in the file system. We save the value of $uniq in the database, to identify the image. The uploaded file is moved to its destination.

// retrieve image info
$imginfo = getimagesize($filename);

// handle image according to type
switch ($imginfo[2]) {
    case 1: // gif
        // convert gif to png using shell command
        $command = $img_conv_dir."gif2png $filename";
        exec($command);
        
        // remove original gif file and rename converted png
        unlink($filename);
        rename("$filename.png", $filename);
        
        // check png image by loading and saving the file
        //  to prevent wrong uploaded files and errors
        $img = imagecreatefrompng($filename);
        imagepng($img, $filename);
        imagedestroy($img);
        
        // set image type to png
        $img_type = "PNG";
        break;

We start handling the file by retrieving the image info using the getimagesize()-method. $imginfo[2] contains a number identifying the image type. In case of a gif-file, we first need to convert it to the more usable png-format. With the gif2png shell command, the image is converted and saved as $filename.png. We then just have to save the image with the original filename, without extension, to continue.

To check for wrong uploaded files, not-png for instance, we let PHP load the image and save it again. By doing so, we get possible errors when uploading, not when retrieving.

    case 2: // jpeg
        // check jpeg image by loading and saving the file
        //  to prevent wrong uploaded files and errors
        $img = imagecreatefromjpeg($filename);
        imagejpeg($img, $filename);
        imagedestroy($img);
        
        // set image type to jpeg
        $img_type = "JPG";
        break;

    case 3: // png
        // check png image by loading and saving the file
        //  to prevent wrong uploaded files and errors
        $img = imagecreatefrompng($filename);
        imagepng($img, $filename);
        imagedestroy($img);
        
        // set image type to png
        $img_type = "PNG";
        break;

Png and jpeg-images are handled just like gif-files, with the only exception that they do not have to be converted to a png-file.

    case 4: // bmp
        // rename file to bmp
        rename($filename, "$filename.bmp");
        
        // convert bmp to png using shell command
        $command = $img_conv_dir."bmptoppm $filename.bmp | ".
                   $img_conv_dir."pnmtopng > $filename";
        exec($command);
        
        // remove original bmp
        unlink("$filename.bmp");
        
        // check png image by loading and saving the file
        //  to prevent wrong uploaded files and errors
        $img = imagecreatefrompng($filename);
        imagepng($img, $filename);

        imagedestroy($img);
        
        // set image type to png
        $img_type = "PNG";
        break;

    default:
        break;
}

The bmp format needs to be converted. We use the programs bmptoppm and pnmtopng to get a nice png. bmptoppm for some reason only accepts files that have a .bmp-extension, so we will have to rename the uploaded file before running it.

// retrieve image file size
$imgbytes = filesize($filename);

After we have asked filesize() for the size of the image, we now know the following about our image:

1. the unique filename ( $uniq)
2. the image type ( $img_type)
3. the image height ( $imginfo[1])
4. the image width ( $imginfo[0])
5. the image size ( $imgbytes)
6. the image title ( $title)
7. the image description ( $descr)
8. the image alt-tag ( $alt).

The last step is the actually saving of this information in the database and displaying a message for the user.

// insert image into db
mysql_query("INSERT INTO $img_table (img_file, img_type, img_height,
   img_width, img_bytes, img_title, img_descr, img_alt)
  VALUES('$uniq', '$img_type', ".$imginfo[1].", ".$imginfo[0].",
         $imgbytes, '".addslashes($HTTP_POST_VARS["title"])."', '".
         addslashes($HTTP_POST_VARS["descr"])."',
         '".addslashes($HTTP_POST_VARS["alt"])."');");

// display some information
echo "Image uploaded.<br><img src=\"img.php?f($uniq)+x(300)\"><br>".
     "URL: img.php?f($uniq)";

We just made our user an image upload form, with which we can submit the information and the image. We also wrote a script that handles the upload. The image is then converted from jpeg, png, bmp or gif to a better usable jpeg of png format and saved. After this step, the information about the image is saved to the database for later use.

You can download the full script we wrote in this article.

In part 2 we will build the other half of our image storage system, containing an image search function and an PHP-object to get the image from the database and generate the appropriate img-tag.

Gijs van Tulder

Gijs is a full time Dutch student in economics and a spare time Web developer. He spends his time developing scripts using PHP, MySQL and other external programs.

Visit his site at: http://gvtulder.f2o.org/