Image Resizing from Database

[ackerley1]

How do I integrate an image resizer for images pulling from a database into the following function:

<?php
function get_rand_img()
{
// Make the Query
$query = "SELECT image_url FROM images ORDER BY RAND() limit 1";
$result = mysql_query($query) or die('query: '.$query."
\n".mysql_error());

// Run the query
// $result = @mysql_query ($query);
// If it ran okay, display records
// if ($num > 0)
// {
echo '<table width="100%" border="1" cellspacing="5" cellpadding="5">';
while( $img = mysql_fetch_assoc( $result ) ) {
echo '<tr>
<td>';
echo '<img src="gall/images/';
echo $img['image_url'];
echo '" width="190px">';
echo '</td></tr>';
}
echo '</table>';


// }
}

?>

These images are being pulled from a 3rd party gallery script DB. You can view the site here: http://www.dilzoncharters.com.

Any adivse?

[speed]

Create a resize.php script and reference that in the <img> tag passing it the URL of the image e.g. [img]resize.php?src=image.jpg[/img]

The browser will expect the output of resize.php to be an image therefore the script can load the source image, resize and output the results to the browser.

You will need to output the correct headers for the image type and you will want to cache the resized images as resizing with any number of visitors will slow down the server.

[ackerley1]

Okay, what would be in the resize script?

Little vague on this type of DB and image interaction. Little more info needed.

Thanks.

[speed]

resize.php would go something like:

<?php
$nw = 100; // The width
$nh = 100; // The height

//Load the source image
$image = ImageCreateFromJPEG($_GET['src']);

// Resize to correct size
$im = ImageCreateTrueColor($nw, $nh);
ImageCopyResampled($im, $image, 0, 0, 0, 0, $nw, $nh, ImageSx($image), ImageSy($image));

// Send to the browser
header('Content-Disposition: filename="' . basename($_GET['src']) . '"');
header('Content-Type: image/jpeg');
ImageJPEG($im, '', 80);
?>

Warning: The data in $_GET['src'] can't be trusted and therefore MUST be sanitised before use, however as I don't know your exact setup and in the interests of keeping it simple I've skipped that. As it stands this script is potentially insecure so don't use it as is in production.

If you place that script on a server with an image file called test.jpg in the same folder then the tag [img]resize.php?src=test.jpg[/img] will output the resized image.

Therefore your code will now read:

echo '<img src="resize.php?src=';
echo urlencode('gall/images/' . $img['image_url']);
echo '" width="190px">';
echo '</td></tr>';
}
echo '</table>';

If all your images are in the gall/images folder then you don't need to pass that in the URL but can rather code that directly into resize.php

[ackerley1]

Well, that works quite well. I am now finding that it is difficult to modify what you have given to allow the height to be constrained by the width.

Is there a way to do this?

Also, what would have to be added to secure the this?

Thanks for the help.

Rob

[speed]

I am now finding that it is difficult to modify what you have given to allow the height to be constrained by the width.

Calculate the ration h/w of the source image and then multiply the new width by the ration you just calculated and convert to an integer to get the height.

Also, what would have to be added to secure the this?

Depends, if for example $_GET['src'] can never have a path separator in it then you kill the script if you find any path information.

Maybe all you file names are in the form 123456.jpg therefore if you see a file name that isn't all numbers followed by .jpg you kill the script. Or maybe check that you only have numbers and a to z followed by .jpg

If all your images are held in the folder gallery then rather than using [img]resize.php?src=gallery/image.jpg[/img] use [img]resize.php?src=image.jpg[/img] i.e. don't allow paths to be given to resize.php

The exact tests you can do will depend on where your files are stored and so on, but you have to assume any data arriving from the user is tainted.

You also need to expand that code to cache the results of the resize operations, you can use filemtime to compare the cached files with the source. If you don't cache and have a reasonable number of visitors you will almost certainly notice a slow down.

[ackerley1]

Okay, all my pics are a different size... Is there a way to check the original w/h and then adjust as needed? Some pics are wider and others are longer. A fixed formula will make one of the two blurry.

Also, all files are coming from the same source, as they are being pulled from another picture gallery program.

Thanks for the help.

Rob

[speed]

ImageSx($image) gives the width of the source image and ImageSy($image) gives the height of the source image, therefore you can work out if it is landscape (width > height) or portrait (width < height).

Once you know that you can then set the width or height as appropriate to the desired size and scale the other dimension based on the aspect ratio.

[ackerley1]

Okay, so should I being doing something like this before/instead of the $nw and $nh setting...

// for landscape
if (ImageSx($image) > ImageSy($image) {
$ratio = ImageSx($image) / ImageSy($image);
$nw = 190; // That is the width I want it.
$nh = 190 * $ratio;
}

Reverse it for portrait.

Would that work?

[speed]

Yes, also have a look at the manual at http://uk2.php.net/ImageCopyResampled the PHP manual has a wealth of comments and examples in it.

[ackerley1]

Hmm... I installed this and now nothing shows up... even though the output html appears correct.

This is what I now have:

<?php
// for landscape
if (ImageSx($image) > ImageSy($image) {
$ratio = ImageSx($image) / ImageSy($image);
$nw = 190; // That is the width I want it.
$nh = (190 * $ratio);
}
// for portrait
else (ImageSy($image) > ImageSx($image) {
$ratio = ImageSy($image) / ImageSx($image);
$nw = 190; // That is the width I want it.
$nh = (190 * $ratio);
}

//Load the source image
$image = ImageCreateFromJPEG($_GET['src']);

// Resize to correct size
$im = ImageCreateTrueColor($nw, $nh);
ImageCopyResampled($im, $image, 0, 0, 0, 0, $nw, $nh, ImageSx($image), ImageSy($image));

// Send to the browser
header('Content-Disposition: filename="' . basename($_GET['src']) . '"');
header('Content-Type: image/jpeg');
ImageJPEG($im, '', 80);
?>

And in the funtion script:

echo '<table width="100%" border="1" cellspacing="5" cellpadding="5">';
while( $img = mysql_fetch_assoc( $result ) ) {
echo '<tr>
<td>';
echo '<img src="resizer.php?src=';
echo urlencode('gall/images/' . $img['image_url']);
echo '">';
echo '</td></tr>';
}
echo '</table>';

Where did I go wrong?

[speed]

You are asking for the source image size before you load it.

<?php
/**
 * Resize and image while maintaining its aspect ratio.
 *
 * @param resource $src The image to resize.
 * @param int $w The target width.
 * @param int $h The target height.
 * @return resource The resized image or the original image if it did not need to be scaled.
 */
function resizeImage($src, $w, $h) {

	// Get the current size
	$width = ImageSx($src);
	$height = ImageSy($src);

	// If one dimension is right then nothing to do
	if($width == $w || $height == $h)
		return($src);

	// Calculate new size
	if(($w - $width) > ($h - $height)) { // use height
		$s = $h / $height;
		$nw = round($width * $s);
		$nh = round($height * $s);
	}
	else { // Use width
		$s = $w / $width;
		$nw = round($width * $s);
		$nh = round($height * $s);
	}

	// Resize to correct size
	$im = ImageCreateTrueColor($nw, $nh);
	ImageCopyResampled($im, $src, 0, 0, 0, 0, $nw, $nh, $width, $height);

	// Return the new image
	return($im);
}

//Load the source image
$image = ImageCreateFromJPEG($_GET['src']);

// Resize to correct size
$image = resizeImage($image, 190, 190);

// Send to the browser
header('Content-Disposition: filename="' . basename($_GET['src']) . '"');
header('Content-Type: image/jpeg');
ImageJPEG($image, '', 80);
?>

[ackerley1]

That worked... thanks so much for your help...

Greatly appreciated.

Rob