Thumbnail cropping / photo upload

[coolisdude]

I have a script for uploading photos and it also creates a thumbnail.

I haven't written this script. I've just been using it and somewhat adapted it to work with my page. In this case it's just updating(can be adding too) a photo for members.

I dont' like the thumbnail feature. First it doesn't work 100% with the width and height(don't know why).
And I don't like how (when you set a height and width for the thumbnail) the photos dont' have the correct proportions.

I would like to crop the thumbnail instead, so that it at least has the right proportion. Square format(kind of like on facebook) would probably be best to fit all kinds of photo layouts.

Is it possible to add this(a cropping feature) to the code below. Also is it difficult to get it to work with other images than JPEG..........like PNG and GIF?

Would be grateful for info about this

Thanks

//CHECK FILE TYPE
if ($_FILES["thefile"]["type"] != "image/pjpeg" AND $_FILES["thefile"]["type"] != "image/jpeg" AND $_FILES["thefile"]["type"] != "") 
{

header("Location: error_filetype.php");
exit;
} 

//CHECK FILE SIZE
$max = '75000'; 
$file_size = $_FILES['thefile']['size']; 

if ($file_size > $max) 
{ 
header("Location: error_filesize.php");
exit;
}



// Upload File To Web Server
$pPath = "photos/"; 

if (is_uploaded_file($_FILES['thefile']['tmp_name'])){
    move_uploaded_file($_FILES['thefile']['tmp_name'], $pPath.$_FILES['thefile']['name']) or die ("Couldn¥t copy");


header("Location: members.php");


// Define the file
$filename = $pPath.$_FILES['thefile']['name'];
$thumbname = "TN_".$_FILES['thefile']['name'];
$thumbnail = $pPath.$thumbname;

// Set a maximum height and width
$width = $Photo_Width;
$height = $Photo_Height;


// Determine File Name
$myfilename = substr($filename, 3);
$mythumbname = substr($thumbnail, 3);



    //Create INSERT query
$qry = "UPDATE members SET content='$content', photo_path='$myfilename', thumb_path='$mythumbname' WHERE member_id='$member_id'";
      $result = mysql_query($qry) or die("Query failed"); 




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

if ($width && ($width_orig < $height_orig)) {
   $per =  (100*$width)/$width_orig;
   $per = round($per);
   $height = ($height_orig*$per)/100;
   echo $height;
   //($height / $height_orig) * $width_orig;
   if ($width < 100){
           $pre = 100 - $width;
        $width = $width + $pre;
        //echo $width;
    }
    if ($width > 100){
        $pre = $width - 100;
        $width = $width - $pre;
        //echo $pre;
    }
} 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, $pPath.$thumbname, 100);
$pasto = getimagesize($pPath.$thumbname);
link($pPath.$_FILES['thefile']['name']);
//unlink($pPath.$_FILES['thefile']['name']);
$user = 1;
$elwidth = $pasto[0];
$elheight = $pasto[1];
} else {


//UPDATE MEMBERS TEXT AREA EVEN IF THERE IS NO PHOTO UPLOADED


} 

[Raffles]

$image = imagecreatefromjpeg($filename);

There's also imagecreatefrompng and imagecreatefromgif. Just find out the filetype first, and switch to the appropriate imagecreate function.

As for cropping... the workhorse will be imagecopy.

Also: http://www.google.co.uk/search?q=php+crop+image
The first link looks good.

[coolisdude]

How would imagecopy work in the code below?

[Rubble]

As you are using GD here is some code you should be able to modify for your needs:

<?php
// Crop dimensions.
$width = 100;
$height = 100;
// Set the path to the image to resize
$input_image = "House.jpg";
// Get the size of the original image into an array
$size = getimagesize( $input_image );
// Prepare canvas
$canvas = imagecreatetruecolor( $width, $height );
// Create a new image in the memory from the file 
$cropped = imagecreatefromjpeg( $input_image );
// Prepare image  crop - center the crop on the image
$newwidth = $size[0] / 2;
$newheight = $size[1] / 2;
$cropLeft = ( $newwidth/2 ) - ( $width/2 );
$cropHeight = ( $newheight/2 ) - ( $height/2 );
// Generate the cropped image
imagecopyresized( $canvas, $cropped, 0,0, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );
// Save the cropped image as cropped.jpg
imagejpeg( $canvas, "cropped.jpg" );
// Clear the memory of the tempory images
imagedestroy( $canvas );
imagedestroy( $cropped );
?>

[coolisdude]

I'm kind of lost here. I don't know if I should use your code only or a mix of your code and the old one

I added your code in the middle of the code below. Is there a way you can show in the code below. I'm kind of a beginner with this stuff. Just wanted a way to crop instead of using wrong proportions

// Upload File To Web Server
$pPath = "photos/"; 

if (is_uploaded_file($_FILES['thefile']['tmp_name'])){
    move_uploaded_file($_FILES['thefile']['tmp_name'], $pPath.$_FILES['thefile']['name']) or die ("Couldn¥t copy");


header("Location: members.php");


// Define the file
$filename = $pPath.$_FILES['thefile']['name'];
$thumbname = "TN_".$_FILES['thefile']['name'];
$thumbnail = $pPath.$thumbname;

//___________________

// Crop dimensions.
$width = 100;
$height = 100;
// Set the path to the image to resize
$input_image = "$filename";
// Get the size of the original image into an array
$size = getimagesize( $input_image );
// Prepare canvas
$canvas = imagecreatetruecolor( $width, $height );
// Create a new image in the memory from the file 
$cropped = imagecreatefromjpeg( $input_image );
// Prepare image  crop - center the crop on the image
$newwidth = $size[0] / 2;
$newheight = $size[1] / 2;
$cropLeft = ( $newwidth/2 ) - ( $width/2 );
$cropHeight = ( $newheight/2 ) - ( $height/2 );
// Generate the cropped image
imagecopyresized( $canvas, $cropped, 0,0, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );
// Save the cropped image as cropped.jpg
imagejpeg( $canvas, "cropped.jpg" );
// Clear the memory of the tempory images
imagedestroy( $canvas );
imagedestroy( $cropped );

//_____________________________

// Set a maximum height and width
$width = $Photo_Width;
$height = $Photo_Height;


// Determine File Name
$myfilename = substr($filename, 3);
$mythumbname = substr($thumbnail, 3);



    //Create INSERT query
$qry = "UPDATE members SET content='$content', photo_path='$myfilename', thumb_path='$mythumbname' WHERE member_id='$member_id'";
      $result = mysql_query($qry) or die("Query failed"); 




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

if ($width && ($width_orig < $height_orig)) {
   $per =  (100*$width)/$width_orig;
   $per = round($per);
   $height = ($height_orig*$per)/100;
   echo $height;
   //($height / $height_orig) * $width_orig;
   if ($width < 100){
           $pre = 100 - $width;
        $width = $width + $pre;
        //echo $width;
    }
    if ($width > 100){
        $pre = $width - 100;
        $width = $width - $pre;
        //echo $pre;
    }
} 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, $pPath.$thumbname, 100);
$pasto = getimagesize($pPath.$thumbname);
link($pPath.$_FILES['thefile']['name']);
//unlink($pPath.$_FILES['thefile']['name']);
$user = 1;
$elwidth = $pasto[0];
$elheight = $pasto[1];
} 

[Rubble]

Sorry for the late reply but I have a lot on at the moment!

I would say that you need to resize the image so that the shortest side is to the final dimension you want and then crop it. I do not use GD and am unsure if you would need to save an intermediate image or if you could do it all in one go.

I would start simple and run your first code to resize the image and save as a tempory png file - otherwise you will get two or three lots of jpg compression on the image.
Then load up the tempory png file and crop it saving as your final version and use unlink() to remove the tempory image.

If you do it this way it will work and if you find you can combine the comands later do it. At least you will have some code that will work.

Something like ( You will need to tidy it up a bit and its untested ):

<?php
// Upload File To Web Server

$pPath = "photos/"; 



if (is_uploaded_file($_FILES['thefile']['tmp_name'])){

    move_uploaded_file($_FILES['thefile']['tmp_name'], $pPath.$_FILES['thefile']['name']) or die ("Couldn't copy");


header("Location: members.php");


// Define the file

$filename = $pPath.$_FILES['thefile']['name'];

$thumbname = "TN_".$_FILES['thefile']['name'];

$thumbnail = $pPath.$thumbname;


// Set a maximum height and width

$width = $Photo_Width;

$height = $Photo_Height;


// Determine File Name

$myfilename = substr($filename, 3);

$mythumbname = substr($thumbnail, 3);


    //Create INSERT query

$qry = "UPDATE members SET content='$content', photo_path='$myfilename', thumb_path='$mythumbname' WHERE member_id='$member_id'";

      $result = mysql_query($qry) or die("Query failed"); 


// Get new dimensions

list($width_orig, $height_orig) = getimagesize($filename);



if ($width && ($width_orig < $height_orig)) {

   $per =  (100*$width)/$width_orig;

   $per = round($per);

   $height = ($height_orig*$per)/100;

   echo $height;

   //($height / $height_orig) * $width_orig;

   if ($width < 100){

           $pre = 100 - $width;

        $width = $width + $pre;

        //echo $width;

    }

    if ($width > 100){

        $pre = $width - 100;

        $width = $width - $pre;

        //echo $pre;

    }

} 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, $pPath.'temp_thumb.png', 100);

$pasto = getimagesize($pPath.$thumbname);

link($pPath.$_FILES['thefile']['name']);

//unlink($pPath.$_FILES['thefile']['name']);

$user = 1;

$elwidth = $pasto[0];

$elheight = $pasto[1];


// Crop dimensions.

$width = 100;

$height = 100;

// Set the path to the image to resize

$input_image = "temp_thumb.png";

// Get the size of the original image into an array

$size = getimagesize( $input_image );

// Prepare canvas

$canvas = imagecreatetruecolor( $width, $height );

// Create a new image in the memory from the file 

$cropped = imagecreatefromjpeg( $input_image );

// Prepare image  crop - center the crop on the image

$newwidth = $size[0] / 2;

$newheight = $size[1] / 2;

$cropLeft = ( $newwidth/2 ) - ( $width/2 );

$cropHeight = ( $newheight/2 ) - ( $height/2 );

// Generate the cropped image

imagecopyresized( $canvas, $cropped, 0,0, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );

// Save the cropped image as cropped.jpg

imagejpeg( $canvas, $mythumbname );

// Clear the memory of the tempory images

imagedestroy( $canvas );

imagedestroy( $cropped );

} 
?>