Weborum Webmaster Forum

Weborum Webmaster Forum > Web Page Design > PHP

Joe

Jul 5 2005, 10:27 AM

I'm pretty sure all of you have seen stock.xchng and the way in which they display their image previews. Well I am trying to accomplish the same results with not much luck.

How is it possible to create thumbnails of a picture and show the preview image scaled down to a smaller size keeping it's original aspect ratio? I've been told to use the imagex and imagey functions but have no idea at the kind of calculation I would need to keep the image from getting distorted.

I would like the image to be displayed inside a 400x400px container, but for the image to be scaled down accordingly ... anyone have any ideas on how to do this? Really need help on this one

TIA

Timo

Jul 5 2005, 03:56 PM

QUOTE(joe2kiss @ Jul 5 2005, 10:27 AM)

I'm pretty sure all of you have seen stock.xchng and the way in which they display their image previews. Well I am trying to accomplish the same results with not much luck.

How is it possible to create thumbnails of a picture and show the preview image scaled down to a smaller size keeping it's original aspect ratio? I've been told to use the imagex and [ur=http://us3.php.net/manual/en/function.imagesy.php]imagey[/url] functions but have no idea at the kind of calculation I would need to keep the image from getting distorted.

I would like the image to be displayed inside a 400x400px container, but for the image to be scaled down accordingly ... anyone have any ideas on how to do this? Really need help on this one

TIA
[right][snapback]29453[/snapback][/right]

I have never done this but I'll try to help...
This is how I'd approach it.
http://us3.php.net/imagecopyresized
That's the function that resizes images to the variables you give it.

First make the thumbnail image (not as a physical image but using the GD commands)... Whatever fixed size you're going to have it at... for example 100x100...
Then create a background for the thumbnail in which you have just a solid color behind it (probably black?).

After this, determine which of the two items will be sticks out more (in the case of a square thumbnail it would be the width).
To do this for something like a 120x100 thumbnail (widthxheight) you'd have to do the following (I think).
120/100 - determines the ratio (for this example)
Big Width / Big Height - whatever the image really is.
If the result is greator than 1 the width would stick out more if the result is less than 1 it's the height and equal to 1, it's an actual square.

Ok, after determining which sticks out, you have to set the sticked out side on the image. If it's height that stood out 800x1000 picture, per se, then you set a variable $NewImageHeight equal to 100 (if it were a 100x100 thumbnail) the other variable (for width) would just be equal to the original image height/new image height multipulied by the width (in this example).

After you've determined the width and height of the scaled down image, create the image using imagecopyresized. (Note: this is an entirely different image than the thumbnail we are creating with the width and height created in such a way that it is just a scaled down version.)

After we create this mini-image, you have to determine where you want it on the thumbnail. Most likely you'll want it placed either in the center top position of the image.

I believe the GD library determines the top left corner to be the starting place for an image... so you only really have to find out the width. The way to do this, I think, is to take the new thumb's width and the rescaled image's width and subtract the rescaled from the new thumb's (you don't need to do if they are equal). Then divide the number you get in half and floor() the result. (This would only be necessary in cases where the height is greater than the width of the original image.)

After you do this you simply take the new thumbnail image and you place the new scaled image on it using something like http://us3.php.net/manual/en/function.imagecopymerge.php

Then you'd be done I think.

This is all just speculation (I've never done this again) but that's how I'd give it a try... Perhaps someone else knows a better way, however... XD

-Tim

Joe

Jul 5 2005, 05:48 PM

Thanks Tim, I can see myself knee deep in loads of reading for the next couple of hours. I think I'll have to create a test setup on my server to play around on.

Timo

Jul 5 2005, 07:06 PM

hehe no problem. The trick is getting the image down to the right size. I may take a crack at this myself tonight after I get back in a couple hours so if you're still stuck feel free to leave a message here.

-Tim

Joe

Jul 5 2005, 08:07 PM

In all honesty I haven't gotten that far yet, I'm still setting up my test setup

I've got my form and most of my error checking and error messages done ... just a few little treaks and I'm onto displaying the data then and the image manipulation...

Joe

Jul 5 2005, 08:49 PM

I think Tim, the function imagecopyresampled is more what were looking for. It resizes down to the set width/height and keeps the correct proportions.

CODE

<?php
// The file
$filename = 'test.jpg';

// Set a maximum height and width
$width = 200;
$height = 200;

// Content type
header('Content-type: image/jpeg');

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);

if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}

// Resample
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

// Output
imagejpeg($image_p, null, 100);
?>

I think with a simple switch statement set we could change;

// Content type
header('Content-type: image/jpeg');

and;

imagecreatefromjpeg($filename);

To match the current file type of the image being manipulated. Will work on this a bit more, see what I can come up with.

Joe

Jul 5 2005, 10:54 PM

I'm at a loss on trying to make the above code into a function though

aviansuicide

Jul 5 2005, 11:19 PM

PHP

<?
// The file
$file = array(); //this MUST be the $_FILE variable

function ImgResize($file)
{
// Set a maximum height and width
$width = 200;
$height = 200;

$type = $file["type"];

list($image,$img_type) = explode('/',$type);

if($image != 'image')
{
die("not an image!");
}
// Content type
header("Content-type: image/jpg");

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($file["tmp_name"]);

if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}

// Resample
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefrom{$img_type}($file["tmp_name"]);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

// Output
imagejpeg($image_p, null, 100);
}
}

this is untested..and a rush function..but you should get the concept behind it.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.