PHP image thumbnails

[wrathican]

hi. i want to use php to create a thumbnail of an image. ive checked out GD library and i do have it installed and enabled.

ive been searching and searching but i cant find a tutorial on how to create a thumbnail of an image from a form. the only thing is that i do not want to simply resize or resample the image i want to crop it down to about 100px x 100px.

ive managed to create an upload form for one image but thats it. i also want to be able to upload a maximum of 5 images. so say a user has the form:

 

<form action="galleryadmin.php?func=processpic" method="post" enctype="multipart/form-data" name="form1">
    Image Title:<br>
    <input name="title" type="textfield">
    <br>
    Image:
    <br>
    <input name="image" type="file">
    <br>
    Alt text:
    <input name="alttext" type="textfield">
    <br>
    <input type="submit" name="Submit" value="Submit">
    <br>
</form>

and i want another file type input box to appear when the user has chosen an image in the first one

and i want a maximum of 5 boxes to appear

then i want to send all the relevant info to a php script that would upload the 5 images

 

if you could help/direct me on the right direction it would be greatly appreaciated

thanks a million

Wrathican

[wrathican]

bump

lemme know if u dont understand what im talking about!

[wrathican]

hey guys im trying to upload a picutre to my server but its not working for some reason, i get this error:

Warning: move_uploaded_file() [function.move-uploaded-file]: open_basedir restriction in effect. File(/images/gallery/127d05fbeb7f44110ee37aec85536d5b.jpg) is not within the allowed path(s): (/tmp:/usr/share/pear:/home/fhlinux179/l/ls12style.co.uk/user) in /home/fhlinux179/l/ls12style.co.uk/user/htdocs/test/index.php on line 24

 

here is my full code:

<?php
switch ($_GET['func'])
{

case "processpic":
//uploads pic and adds to DB
// Upload script goes here
// Then the MySQL stuff goes here

$fileName = $_FILES['image']['name'];
$tmpName = $_FILES['image']['tmp_name'];
$description = $_POST['description'];
$imagename = $_POST['title'];
$albumid = $_POST['albumid'];
// get the file extension first
$ext = substr(strrchr($fileName, "."), 1);

// make the random file name
$randName = md5(rand() * time());

// and now we have the unique file name for the upload file
$filePath = '/images/gallery/' . $randName . '.' . $ext;

$result = move_uploaded_file($tmpName, $filePath);

if(!$result){
echo "<tr><td><p>Error uploading file</p></td></tr>";
exit;
}
chmod($filePath, 0777);
$imagepath = $randName . '.' . $ext;
if(!get_magic_quotes_gpc())
{
$imagename = addslashes($imagename);
$imagepath = addslashes($imagepath);
$description = addslashes($description);
}

echo "<tr><td><p>Thank you, the picture " . $imagename . " has been added to the album. Please go <a href='index.php'>back</a> and add some more pictures to it.</p></td></tr>";

$thumbPath = '/images/gallery/thumb/thumb-' . $randName . '.' . $ext;

cropImage(100, 100, $filePath, 'jpg', $thumbPath);
function cropImage($nw, $nh, $source, $stype, $dest) {
$size = getimagesize($source);
$w = $size[0];
$h = $size[1];
switch($stype) {
	case 'gif':
	$simg = imagecreatefromgif($source);
	break;
	case 'jpg':
	$simg = imagecreatefromjpeg($source);
	break;
	case 'png':
	$simg = imagecreatefrompng($source);
	break;
}
$dimg = imagecreatetruecolor($nw, $nh);
$wm = $w/$nw;
$hm = $h/$nh;
$h_height = $nh/2;
$w_height = $nw/2;
if($w> $h) {
	$adjusted_width = $w / $hm;
	$half_width = $adjusted_width / 2;
	$int_width = $half_width - $w_height;
	imagecopyresampled($dimg,$simg,-$int_width,0,0,0,$adjusted_width,$nh,$w,$h);
} elseif(($w <$h) || ($w == $h)) {
	$adjusted_height = $h / $wm;
	$half_height = $adjusted_height / 2;
	$int_height = $half_height - $h_height;
	imagecopyresampled($dimg,$simg,0,-$int_height,0,0,$nw,$adjusted_height,$w,$h);
} else {
	imagecopyresampled($dimg,$simg,0,0,0,0,$nw,$nh,$w,$h);
}
imagejpeg($dimg,$dest,100);
}
break;

default:
//shows form to add picture to an album
?>
<tr>
<td>
<form action="?func=processpic" method="post" enctype="multipart/form-data" name="form1"><p>
Image Title:<br>
<input name="title" type="textfield">
<br>
Description:
<br>  
<textarea name="description" cols="50" rows="7"></textarea>
<br>
Image:
<br>
<input name="image" type="file" id="image">
<input name="MAX_FILE_SIZE" type="hidden" id="MAX_FILE_SIZE" value="2000000">
<br>
<input type="submit" name="Submit" value="Submit">
<input type="hidden" name="albumid" value="<?php echo $alid; ?>">
<input type="reset" name="Submit2" value="Reset">
<br>
<a href="galleryadmin.php">Back</a></p>
</form>
</p>
</td>
</tr>
<?php
break;
}
?>

 

also anyidea how i would make all this into one function so that the values could be inserted into a DB?

thanks alot

[Fadion]

Ok lets discuss about the logic. U want to have 5 files input where the users will upload up to 5 images. Then with php u will check which one of the inputs is filled using smth like "strlen($_FILES['input1']['name']) > 1" or whatever. If the input is filled, move_uploaded_file and crop it with gd. Dont know how much uve done for the crop thing, but im assuming u havent done it yet:

 

$originalImg = imagecreatefromjpeg('image.jpg');
list($width, $height) = getimagesize($originalImg);

$croppedWidth = 100;
$croppedHeight = 100;
$newName = 'image_cropped.jpg';

$tmpImg = imagecreatetruecolor($croppedWidth, $croppedHeight);
imagecopyresampled($tmpImg, $originalImg, 0, 0, 0, 0, $croppedWidth, $croppedHeight, $croppedWidth, $croppedHeight);

imagejpeg($tmpImg, $newName, 100);

 

What does the work is imagecopyresampled(). U can make it a function and call it wherever u need to crop. Didnt test it!!!!

[Fadion]

Ohh i posted seconds after your more specific question. Anyway. About the error ure getting, i googled it and found <a href="http://bugs.php.net/bug.php?id=21885">this</a>. Its an old article and im not sure it will help.

[dbillings]

Why are people so fascinated with a GD thumbnail? You can use an html image tag to do the same task. Here's an example with my rediculously gorgeous infant daughter. It doesn't work in this forum but it would as a link on a site.

<a href="http://i2.photobucket.com/albums/y46/dennisbillings/100_0158.jpg><img width="100" height="100" src="http://i2.photobucket.com/albums/y46/dennisbillings/100_0158.jpg"></a>

 

 

[hitman6003]

dbillings...

 

The reason you don't do that is because doing so doesn't actually reduce the size of the image.  This means if the image of your daughter is 10 MB in size and you decide that the whole world needs to see that image on the front page of your website, then every visitor must download all 10 MB and then the browser reduces the size client side, even if they don't want to see the full size image.

 

If you create a thumbnail, say 100px X 100px, then that formly 10 MB pic is now probably 5k...the users who want to see the full size image can click it and see the large version, everyone else doesn't have to waste their time downloading something they don't need to.

 

Additionally, the browser usually does a crappy job of "reducing" the size.

[Fadion]

Why are people so fascinated with a GD thumbnail? You can use an html image tag to do the same task.

 

Probably because with GD one can resize and resample the thumbnail to mantain image quality and to lower a lot filesize. With your example u have a thumbnail with crisp edges and of the same filesize of the fullsize image.

[dbillings]

interesting, I had no idea.

[wrathican]

well the thing is i have used this script before and it works perfectly fine. the only differences in it are that i use '../images' instead of '/images'

[wrathican]

ok, so i had used this before in another similar script. the difference was that i was using this in my 'htdocs' folder so like MY base directory, not the the servers. the instance where i had used this before was in a CMS. the CMS was on directory deep so 'htdocs\cms\' and i was using '../images' in my script so that it would go up one level then go into the images folder that was present. it appears that i probably got my folder locating system wrong. using '/images/' did play well. maybe if i use 'images/'? it might work? yes it did. so something as simple as getting the folder locations wrong can screw it up...

the main point is i sorted it out. it now uploads the files and creates a thumbnail.

 

the problems:

-my createthumnail function actually resizes the image, which is NOT what i wanted it to do. i just wanted it to crop it at the middle of the image to 100 x 100px.

-i also want another file selection box to appear when the first one has some content in it...

i took a sneaky little peak at the source code of my host's ftp client (its a php html based one) and i found this:

<input type="file" class="uploadinputbutton" maxsize="2097152" name="file[]" onChange="add_file('file', 1);" />

 

now ive got the upload sorted i want to add the location of the image, thumbnail, and alt txt into a db (this i think should be no problem)

 

i have modified the code so here is the new version:

<?php

function cropImage($nw, $nh, $source, $stype, $dest) {
$size = getimagesize($source);
$w = $size[0];
$h = $size[1];
switch($stype) {
	case 'gif':
	$simg = imagecreatefromgif($source);
	break;
	case 'jpg':
	$simg = imagecreatefromjpeg($source);
	break;
	case 'png':
	$simg = imagecreatefrompng($source);
	break;
}
$dimg = imagecreatetruecolor($nw, $nh);
$wm = $w/$nw;
$hm = $h/$nh;
$h_height = $nh/2;
$w_height = $nw/2;
if($w> $h) {
	$adjusted_width = $w / $hm;
	$half_width = $adjusted_width / 2;
	$int_width = $half_width - $w_height;
	imagecopyresampled($dimg,$simg,-$int_width,0,0,0,$adjusted_width,$nh,$w,$h);
} elseif(($w <$h) || ($w == $h)) {
	$adjusted_height = $h / $wm;
	$half_height = $adjusted_height / 2;
	$int_height = $half_height - $h_height;
	imagecopyresampled($dimg,$simg,0,-$int_height,0,0,$nw,$adjusted_height,$w,$h);
} else {
	imagecopyresampled($dimg,$simg,0,0,0,0,$nw,$nh,$w,$h);
}
imagejpeg($dimg,$dest,100);
}

switch ($_GET['func'])
{

case "processpic":
//uploads pic and adds to DB
// Upload script goes here
// Then the MySQL stuff goes here

$fileName = $_FILES['image']['name'];
$tmpName = $_FILES['image']['tmp_name'];
$altTxt = $_POST['alttxt'];
// get the file extension first
$ext = substr(strrchr($fileName, "."), 1);

// make the random file name
$randName = md5(rand() * time());

// and now we have the unique file name for the upload file
$filePath = 'images/' . $randName . '.' . $ext;

$result = move_uploaded_file($tmpName, $filePath);

if(!$result){
echo "<p>Error uploading file</p>";
exit;
}
chmod($filePath, 0777);
$imagepath = $randName . '.' . $ext;
if(!get_magic_quotes_gpc())
{
$imagename = addslashes($imagename);
$imagepath = addslashes($imagepath);
$description = addslashes($description);
}

echo "<p>Thank you, the picture " . $imagename . " has been added to the album. Please go <a href='index.php'>back</a> and add some more pictures to it.</p>";

$thumbPath = 'images/thumb/thumb-' . $randName . '.' . $ext;

cropImage(100, 100, $filePath, 'jpg', $thumbPath);
break;

default:
//shows form to add picture to an album
?>
<form action="?func=processpic" method="post" enctype="multipart/form-data" name="form1"><p>
Alt text:<br>
<input name="alttxt" type="textfield">
<br>
Image:
<br>
<input name="image" type="file" id="image">
<br>
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">
<br>
<a href="index.php">Back</a></p>
</form>
</p>
<?php
break;
}
?>

 

[jitesh]

http://www.phpfreaks.com/forums/index.php/topic,141077.msg600776.html#msg600776