Thumbnail

Monday, 5th May 2003

How to create a thumbnail and store it in a MySQL database?

That question has kept me busy for weeks, while working on the Dutch real estate web site huizentoppers.nl.

PHP has powerful functions for image processing. The web offers good documentation on PHP.

Still, it took me a quest of weeks to gather all necessary coding details.

In order to spare my fellow PHP fans a similar quest, this week's Nut describes all the required PHP source code.

Photo upload, Browser

<HTML> <form enctype="multipart/form-data" method="post" action="update.php3" name="form1"> <input type="hidden" name="MAX_FILE_SIZE" value="102400"> <input type="file" name="photo" accept="image/jpeg"> <input type="hidden" name="id" value="12345"> <input type=submit value="Send"> </form> </HTML>

With special thanks for the HTML advises of: pangaeainc.com, Terry Schmidt.

Photo upload, validation at server

The browser's validation is far from perfect. So, the PHP script at server side must recheck the input. <?php $sPhotoFileName = $_FILES['photo']['name']; // get client side file name if ($sPhotoFileName) // file uploaded { $aFileNameParts = explode(".", $sPhotoFileName); $sFileExtension = end($aFileNameParts); // part behind last dot if ($sFileExtension != "jpg" && $sFileExtension != "JPEG" && $sFileExtension != "JPG") { die ("Choose a JPG for the photo"); } $nPhotoSize = $_FILES['photo']['size']; // size of uploaded file if ($nPhotoSize == 0) { die ("Sorry. The upload of $sPhotoFileName has failed. Search a photo smaller than 100K, using the button."); } if ($nPhotoSize > 102400) { die ("Sorry. The file $sPhotoFileName is larger than 100K. Advice: reduce the photo using a drawing tool."); } // read photo $sTempFileName = $_FILES['photo']['tmp_name']; // temporary file at server side $oTempFile = fopen($sTempFileName, "r"); $sBinaryPhoto = fread($oTempFile, fileSize($sTempFileName)); // Try to read image $nOldErrorReporting = error_reporting(E_ALL & ~(E_WARNING)); // ingore warnings $oSourceImage = imagecreatefromstring($sBinaryPhoto); // try to create image error_reporting($nOldErrorReporting); if (!$oSourceImage) // error, image is not a valid jpg { die ("Sorry. It was not possible to read photo $sPhotoFileName. Choose another photo in JPG format."); } } ?>

Source: php.net/....

Create thumbnail

<?php $nWidth = imagesx($oSourceImage); // get original source image width $nHeight = imagesy($oSourceImage); // and height // create small thumbnail $nDestinationWidth = 80; $nDestinationHeight = 60; //$oDestinationImage = imagecreatetruecolor($nDestinationWidth, $nDestinationHeight); $oDestinationImage = imagecreate($nDestinationWidth, $nDestinationHeight); /*$oResult = imagecopyresampled( $oDestinationImage, $oSourceImage, 0, 0, 0, 0, $nDestinationWidth, $nDestinationHeight, $nWidth, $nHeight); // resize the image */ imagecopyresized( $oDestinationImage, $oSourceImage, 0, 0, 0, 0, $nDestinationWidth, $nDestinationHeight, $nWidth, $nHeight); // resize the image ob_start(); // Start capturing stdout. imageJPEG($oDestinationImage); // As though output to browser. $sBinaryThumbnail = ob_get_contents(); // the raw jpeg image data. ob_end_clean(); // Dump the stdout so it does not screw other output. ?>

BLOB in MySQL database

MySQL offers an easy feature to store photo's, drawings and documents. MySQL supports BLOBS, binary large objects in several sizes mysql.com/.... A standard size BLOB is large enough for photos.

Store Thumbnail in database

<?php $sBinaryThumbnail = addslashes($sBinaryThumbnail); $oDatabase = mysql_connect("localhost", "your_database_user_id", "your_database_password"); mysql_select_db("your_database_name", $oDatabase); $sQuery = "UPDATE your_table SET thumbnail = '$sBinaryThumbnail' WHERE id = '$nId'"; mysql_query($sQuery, $oDatabase); ?>

Source, article on BLOBs: zdnetindia.com/...

Show Thumbnail

Thumbnail:
,
  1. Create an image tag with the URL of a special PHP thumbnail script as SRC parameter.
  2. Specify the width and height in the IMG tag so the browser can render the page, before the thumbnail has been loaded. <HTML> <img src="thumbnail.php?id=12345" width=80 height=60> </HTML>
  3. The PHP thumbnail script pretends to be a JPG file, sends an image to the browser. <?php header("Content-type: image/jpeg"); // act as a jpg file to browser $oDatabase = mysql_connect("localhost", "your_database_user_id", "your_database_password"); mysql_select_db("your_database_name", $oDatabase); $sQuery = "SELECT thumbnail FROM your_table WHERE id = $nId"; $oResult = mysql_query($sQuery, $oDatabase); $oRow = mysql_fetch_array($oResult); $sJpg = $oRow["thumbnail"]; echo $sJpg; ?>

Source, the same story on BLOBs: zdnetindia.com/...
Special thanks to Russell Graves for debugging.

Till next nut,
Nut