Automated Creation of Thumbnails With PHP - The Article

(Page 2 of 3 )

The Idea

The idea is simple, yet powerful: supply an image once; retrieve it in all possible formats, sizes and file types. We will build a PHP script that will automate these actions for us. We would like to use the URL of the image to supply our wishes to the script.

A possible URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300) Using this URL, we would like to get the image identified by 3cb7f702a5967, resized to a width of 300 pixels and the corresponding height. The possibilities of our newly created script will be:

1. resize an image to a given width and/or height, possibly preserve the aspect ration;
2. accept new image sizes as absolute values, and as percentages of the original size;
3. resize an image when width or height exceed a given limit;
4. return the image as a PNG or JPEG-file.

What We Need

To build and use this script, you will need PHP compiled with the GD library and JPEG-support.

The Syntax

For telling our script what to return, we will use the following syntax. The arguments are delimited by one or more +-es. An example URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300)

Code	Meaning
f(3cb7f702a5967)	The 13-character filename of the requested image. The images are saved without an extension, with the name defined by the current value of uniqid();. That way, new uploaded files will automatically have an unique id.
w(123) or w(10%)	The wanted width of the returned image, either in absolute pixels or relative to the original size.
h(123) or h(10%)	Same as above, but this is for the height of the image. When just one of the size-commands are given, the other size is automatically calculated, so that de aspect ratio of the image stays the same.
x(123)	Defines the maximum width of the returned image. Resizing only takes place if the original width exceeds the given maximum. Only absolute values are accepted.
y(123)	Same but for height.
t(png|jpg)	Defines the requested file type of the image. If no type is given, the image is returned as the original saved type.
q(100)	Only for JPEG. Asks for a specific quality of the returned image. Quality can vary from 0 to 100.

The Script

Now that we have defined the syntax of the script, it is time to take a closer look at the actual code.

Checking the arguments

First of all, the given arguments are read from the query string by a simple preg. The regular expression returns all possible tags. Then the tags have to be checked for incorrect values. Defining an array of possible tags and corresponding regular expressions, is an easy way to check the tags in a for-loop. The checked and correct tags are saved in an associative array for later use. As a last check, the script verifies that a filename is given and that that file really does exist.

// define the base image dir
$base_img_dir = "./img/";
// find tags
preg_match_all("/\+*(([a-z])\(([^\)]+)\))\+*/", $QUERY_STRING,
$matches, PREG_SET_ORDER);
// empty array and set regular expressions for the check
$tags = array();
$check = array( "f" => "[0-9a-zA-Z]{13}",
"w" => "[0-9]+%?",
"h" => "[0-9]+%?",
"x" => "[0-9]+",
"y" => "[0-9]+",
"t" => "jpg|png",
"q" => "1?[0-9]{1,2}" );
// check tags and save correct values in array
for ($i=0; $i<count($matches); $i++) {
if (isset($check[$matches[$i][2]])) {
if (preg_match('/^('.$check[$matches[$i][2]].')$/',
$matches[$i][3])) {
$tags[$matches[$i][2]] = $matches[$i][3];
}
}
}
function notfound() {
header("HTTP/1.0 404 Not Found");
exit;
}
// check that filename is given
if (!isset($tags["f"])) {
notfound();
}
// check if file exists
if (!file_exists($base_img_dir.$tags["f"])) {
notfound();
}

Loading the Image

The next step is the actual loading of the image. The getimagesize(); function is used to determine the file type, and then the correct method is used to load the image. In case the requested type of the returned image is not given, the file type of the original image is set as a default.

// retrieve file info
$imginfo = getimagesize($base_img_dir.$tags["f"]);
// load image
switch ($imginfo[2]) { 
case 2: // jpg
$img_in = imagecreatefromjpeg($base_img_dir.$tags["f"]) or notfound();
if (!isset($tags["t"])) {
$tags["t"] = "jpg";
}
break;
case 3: // png
$img_in = imagecreatefrompng($base_img_dir.$tags["f"]) or notfound();
if (!isset($tags["t"])) {
$tags["t"] = "png";
}
break;
default:
notfound();
}

Possible Resize

The most important part of the script is, of course, the resize. First, we have to look whether or not a resize is needed. When width or height tags are given, the new width and height are calculated using the size of the original image. The new size is used to copy the original image to the new, resized instance.

// check for maximum width and height
if (isset($tags["x"])) {
if ($tags["x"] < imagesx($img_in)) {
$tags["w"] = $tags["x"];
}
}
if (isset($tags["y"])) {
if ($tags["y"] < imagesy($img_in)) {
$tags["h"] = $tags["y"];
}
}
// check for need to resize
if (isset($tags["h"]) or isset($tags["w"])) {
// convert relative to absolute
if (isset($tags["w"])) {
if (strstr($tags["w"], "%")) {
$tags["w"] = (intval(substr($tags["w"], 0, -1)) / 100) *
$imginfo[0];
}
}
if (isset($tags["h"])) {
if (strstr($tags["h"], "%")) {
$tags["h"] = (intval(substr($tags["h"], 0, -1)) / 100) *
$imginfo[1];
}
}
// resize
if (isset($tags["w"]) and isset($tags["h"])) {
$out_w = $tags["w"];
$out_h = $tags["h"];
} elseif (isset($tags["w"]) and !isset($tags["h"])) {
$out_w = $tags["w"];
$out_h = $imginfo[1] * ($tags["w"] / $imginfo[0]);
} elseif (!isset($tags["w"]) and isset($tags["h"])) {
$out_w = $imginfo[0] * ($tags["h"] / $imginfo[1]);
$out_h = $tags["h"];
} else {
$out_w = $tags["w"];
$out_h = $tags["h"];
}
// new image in $img_out
$img_out = imagecreate($out_w, $out_h);
imagecopyresized($img_out, $img_in, 0, 0, 0, 0, imagesx($img_out),
imagesy($img_out), imagesx($img_in), imagesy($img_in));
} else {
// no resize needed
$img_out = $img_in;
}

Returning the Image

The last step in our script is the actual returning of the image. The image and corresponding headers are returned as set in the query string. If the wanted type is not given, the image is returned as the original type of the saved file.

// check for a given jpeg-quality, otherwise set to default
if (!isset($tags["q"])) {
$tags["q"] = 75;
}
// returning the image
switch ($tags["t"]) {
case "jpg":
header("Content-type: image/jpeg");
imagejpeg($img_out, "", $tags["q"]);
exit;
case "png":
header("Content-type: image/png");
imagepng($img_out);
exit;
default:
notfound();
}

Next: Conclusion >>
 

More PHP Articles
More By Gijs van Tulder

Comments On: Automated Creation of Thumbnails With PHP

>>> Be the FIRST to comment on this article!