Thumbnail quality

Hi everyone…

Thanks to SpikeZ here, I have a website for my pics. He helped so much.

I am now having a bit of trouble with my thumbnail quality. They look like they are being over sharpened at upload. How do I set it to zero ? This is the site and the code where GD is used.

Thank you for any help you could give…

A page with some thumbnails…

Rajeev Thomas Photography

<?php
    include("config.inc.php");
    if(!$_POST) {
    header("Location: preupload.php");
    exit();
} 

 
    // initialization
    $result_final = "";
    $counter = 0;

// List of our known photo types
    $known_photo_types = array(
                        'image/pjpeg' => 'jpg',
                        'image/jpeg' => 'jpg',
                        'image/gif' => 'gif',
                        'image/bmp' => 'bmp',
                        'image/x-png' => 'png'
                    );
   
// GD Function List
    $gd_function_suffix = array(
                        'image/pjpeg' => 'JPEG',
                        'image/jpeg' => 'JPEG',
                        'image/gif' => 'GIF',
                        'image/bmp' => 'WBMP',
                        'image/x-png' => 'PNG'
                    );
 
// Fetch the photo array sent by preupload.php
    $photos_uploaded = $_FILES['photo_filename'];
    
// Fetch the photo caption array
    $photo_caption = $_POST['photo_caption'];

// Fetch the photo caption array
    $photo_description = $_POST['photo_description'];

// Fetch the photo caption array
    $photo_keyword = $_POST['photo_keyword'];

    while( $counter <count($_FILES['photo_filename']['tmp_name']) ) 
{
        if($photos_uploaded['size'][$counter] > 0)
        {
            if(!array_key_exists($photos_uploaded['type'][$counter], $known_photo_types))
            {
                $result_final .= "File ".($counter+1)." is not a photo<br />";
            }
            else
            {
                mysql_query(
                    "INSERT INTO
                        gallery_photos (
                    `photo_filename`,
                    `photo_caption`,
                    `photo_description`,
                    `photo_keywords`,
                    `photo_category`
                    ) VALUES(
                        '0',
                        '".addslashes($photo_caption[$counter])."',
                        '".addslashes($photo_description[$counter])."',
                        '".addslashes($photo_keyword[$counter])."',
                        '".addslashes($_POST['category'])."')"
                    ) or die(mysql_error() . 'Photo not uploaded');
                   
                $new_id = mysql_insert_id();
                $filetype = $photos_uploaded['type'][$counter];
                $extention = $known_photo_types[$filetype];
                $filename = $new_id.".".$extention;
 
                mysql_query( "UPDATE gallery_photos SET photo_filename='".addslashes($filename)."' WHERE photo_id='".addslashes($new_id)."'" );
 
                // Store the orignal file
                copy($photos_uploaded['tmp_name'][$counter], $images_dir."/".$filename);
 
                // Let's get the Thumbnail size
                $size = GetImageSize( $images_dir."/".$filename );
                if($size[0] > $size[1])
                {
                    $thumbnail_width = 165;
                    $thumbnail_height = (int)(165 * $size[1] / $size[0]);
                }
                else
                {
                    $thumbnail_width = (int)(165 * $size[0] / $size[1]);
                    $thumbnail_height = 165;
                }
           
                // Build Thumbnail with GD 1.x.x, you can use the other described methods too
                $function_suffix = $gd_function_suffix[$filetype];
                $function_to_read = "ImageCreateFrom".$function_suffix;
                $function_to_write = "Image".$function_suffix;
 
                // Read the source file
                $source_handle = $function_to_read ( $images_dir."/".$filename );
               
                if($source_handle)
                {
                    // Let's create an blank image for the thumbnail
                        $destination_handle = ImageCreateTrueColor ( $thumbnail_width, $thumbnail_height );
               
                    // Now we resize it
                    ImageCopyResized( $destination_handle, $source_handle, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1] );
                }
 
                // Let's save the thumbnail
                $function_to_write( $destination_handle, $images_dir."/tb_".$filename, 100 );
                ImageDestroy($destination_handle );
                //

           
               
 
                $result_final .= "<img src='".$images_dir. "/tb_".$filename."' /> File ".($counter+1)." Added<br />";
            }
        }
    $counter++;
    }
 
    // Print Result
echo <<<__HTML_END
 
<html>
<head>
    <title>Photos uploaded</title>
</head>
<body>
    $result_final
</body>
</html>
 
__HTML_END;
?>

Hi Rajeev,

Your code uses the imagecopyresized() function. This resizes images in a fast but crude manner, resulting in the problem you’re seeing with image quality.

You can use a different function, imagecopyresampled(), which will get rid of the pixellated results you’re seeing. Sometimes the results from imagecopyresampled() may be a little too soft, if that is the case then we can help you to sharpen them up a bit later.

So, have a go with imagecopyresampled() instead of imagecopyresized(). (:

Thank you Salathe… !! :slight_smile: It worked like a charm…!!! All I did was replacing imagecopyresized() with imagecopyresampled() . Is there anything else I am supposed to be doing ?

You are right , now the thumbnails are soft. How do I sharpen them a bit more…? How do I add that function? Thanks again…

For sharpening the images a little, see imageconvolution(). There are several examples, and good links for further information on that page.

Hi Salathe…

I came up with this after staring at this for a while…not sure this correct…can you please check?

I am really confused at the $img source part … is

 $img = ImageCreateTrueColor ( $thumbnail_width, $thumbnail_height);

correct? Or what should I really do there?

 include("config.inc.php");
    if(!$_POST) {
    header("Location: preupload.php");
    exit();
} 

 
    // initialization
    $result_final = "";
    $counter = 0;

// List of our known photo types
    $known_photo_types = array(
                        'image/pjpeg' => 'jpg',
                        'image/jpeg' => 'jpg',
                        'image/gif' => 'gif',
                        'image/bmp' => 'bmp',
                        'image/x-png' => 'png'
                    );
   
// GD Function List
    $gd_function_suffix = array(
                        'image/pjpeg' => 'JPEG',
                        'image/jpeg' => 'JPEG',
                        'image/gif' => 'GIF',
                        'image/bmp' => 'WBMP',
                        'image/x-png' => 'PNG'
                    );
 
// Fetch the photo array sent by preupload.php
    $photos_uploaded = $_FILES['photo_filename'];
    
// Fetch the photo caption array
    $photo_caption = $_POST['photo_caption'];

// Fetch the photo caption array
    $photo_description = $_POST['photo_description'];

// Fetch the photo caption array
    $photo_keyword = $_POST['photo_keyword'];

    while( $counter <count($_FILES['photo_filename']['tmp_name']) ) 
{
        if($photos_uploaded['size'][$counter] > 0)
        {
            if(!array_key_exists($photos_uploaded['type'][$counter], $known_photo_types))
            {
                $result_final .= "File ".($counter+1)." is not a photo<br />";
            }
            else
            {
                mysql_query(
                    "INSERT INTO
                        gallery_photos (
                    `photo_filename`,
                    `photo_caption`,
                    `photo_description`,
                    `photo_keywords`,
                    `photo_category`
                    ) VALUES(
                        '0',
                        '".addslashes($photo_caption[$counter])."',
                        '".addslashes($photo_description[$counter])."',
                        '".addslashes($photo_keyword[$counter])."',
                        '".addslashes($_POST['category'])."')"
                    ) or die(mysql_error() . 'Photo not uploaded');
                   
                $new_id = mysql_insert_id();
                $filetype = $photos_uploaded['type'][$counter];
                $extention = $known_photo_types[$filetype];
                $filename = $new_id.".".$extention;
 
                mysql_query( "UPDATE gallery_photos SET photo_filename='".addslashes($filename)."' WHERE photo_id='".addslashes($new_id)."'" );
 
                // Store the orignal file
                copy($photos_uploaded['tmp_name'][$counter], $images_dir."/".$filename);
 
                // Let's get the Thumbnail size
                $size = GetImageSize( $images_dir."/".$filename );
                if($size[0] > $size[1])
                {
                    $thumbnail_width = 200;
                    $thumbnail_height = (int)(200 * $size[1] / $size[0]);
                }
                else
                {
                    $thumbnail_width = (int)(200 * $size[0] / $size[1]);
                    $thumbnail_height = 200;
                }
           
                // Build Thumbnail with GD 1.x.x, you can use the other described methods too
                $function_suffix = $gd_function_suffix[$filetype];
                $function_to_read = "ImageCreateFrom".$function_suffix;
                $function_to_write = "Image".$function_suffix;
 
                // Read the source file
                $source_handle = $function_to_read ( $images_dir."/".$filename );
               
                if($source_handle)
                {
                    // Let's create an blank image for the thumbnail
                        $destination_handle = ImageCreateTrueColor ( $thumbnail_width, $thumbnail_height );
               
                    // Now we resize it
                    imagecopyresampled( $destination_handle, $source_handle, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1] ) ;
                }

         [COLOR="DarkOrange"]   
           $img = ImageCreateTrueColor ( $thumbnail_width, $thumbnail_height);[/COLOR]

           $sharpenMatrix = $matrix = 
                        array(    
                        array( -1, -1, -1 ),
                        array( -1, 9, -1 ),
                        array( -1, -1, -1 ) );
           $divisor = 8;
           $offset = 0;

           imageconvolution($img, $sharpenMatrix, $divisor, $offset);

           
            // apply the matrix
            imageconvolution($img, $sharpenMatrix, $divisor, $offset); 
 
                // Let's save the thumbnail
                $function_to_write( $destination_handle, $images_dir."/tb_".$filename, 100 );
                ImageDestroy($destination_handle );
                //

           
               
 
                $result_final .= "<img src='".$images_dir. "/tb_".$filename."' /> File ".($counter+1)." Added<br />";
            }
        }
    $counter++;
    }
 
    // Print Result
echo <<<__HTML_END
 
<html>
<head>
    <title>Photos uploaded</title>
</head>
<body>
    $result_final
</body>
</html>
 
__HTML_END;

Salathe… thank you for your help and patience with me. I am not good with php as much as I would like to be… :frowning: I would like to use this code in mine…how do I plug in to my code above…?

  $sharpenMatrix = array
            (
                array(-1.2, -1, -1.2),
                array(-1, 20, -1),
                array(-1.2, -1, -1.2)
            );

            // calculate the sharpen divisor
            $divisor = array_sum(array_map('array_sum', $sharpenMatrix));           

            $offset = 0;
           
            // apply the matrix
            imageconvolution($img, $sharpenMatrix, $divisor, $offset); 

Any suggestions or directions will be appreciated…

Thank you Salathe…

Rajeev.

Hi Rajeev

Run the sharpening function after the thumbnail image has been created:


<?php
    include("config.inc.php");
    if(!$_POST) {
    header("Location: preupload.php");
    exit();
}

 
    // initialization
    $result_final = "";
    $counter = 0;

// List of our known photo types
    $known_photo_types = array(
                        'image/pjpeg' => 'jpg',
                        'image/jpeg' => 'jpg',
                        'image/gif' => 'gif',
                        'image/bmp' => 'bmp',
                        'image/x-png' => 'png'
                    );
  
// GD Function List
    $gd_function_suffix = array(
                        'image/pjpeg' => 'JPEG',
                        'image/jpeg' => 'JPEG',
                        'image/gif' => 'GIF',
                        'image/bmp' => 'WBMP',
                        'image/x-png' => 'PNG'
                    );
 
// Fetch the photo array sent by preupload.php
    $photos_uploaded = $_FILES['photo_filename'];
   
// Fetch the photo caption array
    $photo_caption = $_POST['photo_caption'];

// Fetch the photo caption array
    $photo_description = $_POST['photo_description'];

// Fetch the photo caption array
    $photo_keyword = $_POST['photo_keyword'];

    while( $counter <count($_FILES['photo_filename']['tmp_name']) )
{
        if($photos_uploaded['size'][$counter] > 0)
        {
            if(!array_key_exists($photos_uploaded['type'][$counter], $known_photo_types))
            {
                $result_final .= "File ".($counter+1)." is not a photo<br />";
            }
            else
            {
                mysql_query(
                    "INSERT INTO
                        gallery_photos (
                    `photo_filename`,
                    `photo_caption`,
                    `photo_description`,
                    `photo_keywords`,
                    `photo_category`
                    ) VALUES(
                        '0',
                        '".addslashes($photo_caption[$counter])."',
                        '".addslashes($photo_description[$counter])."',
                        '".addslashes($photo_keyword[$counter])."',
                        '".addslashes($_POST['category'])."')"
                    ) or die(mysql_error() . 'Photo not uploaded');
                  
                $new_id = mysql_insert_id();
                $filetype = $photos_uploaded['type'][$counter];
                $extention = $known_photo_types[$filetype];
                $filename = $new_id.".".$extention;
 
                mysql_query( "UPDATE gallery_photos SET photo_filename='".addslashes($filename)."' WHERE photo_id='".addslashes($new_id)."'" );
 
                // Store the orignal file
                copy($photos_uploaded['tmp_name'][$counter], $images_dir."/".$filename);
 
                // Let's get the Thumbnail size
                $size = GetImageSize( $images_dir."/".$filename );
                if($size[0] > $size[1])
                {
                    $thumbnail_width = 500;
                    $thumbnail_height = (int)(500 * $size[1] / $size[0]);
                }
                else
                {
                    $thumbnail_width = (int)(500 * $size[0] / $size[1]);
                    $thumbnail_height = 500;
                }
          
                // Build Thumbnail with GD 1.x.x, you can use the other described methods too
                $function_suffix = $gd_function_suffix[$filetype];
                $function_to_read = "ImageCreateFrom".$function_suffix;
                $function_to_write = "Image".$function_suffix;
 
                // Read the source file
                $source_handle = $function_to_read ( $images_dir."/".$filename );
                
                $sharpenMatrix = array
                (
                    array(-1.2, -1, -1.2),
                    array(-1, 8, -1),
                    array(-1.2, -1, -1.2)
                );

                // calculate the sharpen divisor
                $divisor = array_sum(array_map('array_sum', $sharpenMatrix));          
    
                $offset = 0;
                
                if($source_handle)
                {
                    // Let's create an blank image for the thumbnail
                     $destination_handle = ImageCreateTrueColor ( $thumbnail_width, $thumbnail_height );
              
                    // Now we resize it
                    imagecopyresampled( $destination_handle, $source_handle, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1] ) ;
                    
                    // and now sharpen it - after its been resized
                    imageconvolution($destination_handle, $sharpenMatrix, $divisor, $offset);
                     
          
            
                }

          
          
                // Let's save the thumbnail
                $function_to_write( $destination_handle, $images_dir."/tb_".$filename, 100 );
                ImageDestroy($destination_handle );
                //

          
              
 
                $result_final .= "<img src='".$images_dir. "/tb_".$filename."' /> File ".($counter+1)." Added<br />";
            }
        }
    $counter++;
    }
 
    // Print Result
echo <<<__HTML_END
 
<html>
<head>
    <title>Photos uploaded</title>
</head>
<body>
    $result_final
</body>
</html>
 
__HTML_END;
?>

See if that helps.

WORKS!!! :slight_smile:

spikeZ…you are the best. Thank you for the time and help…! Now I am gonna study your changes and see if I could learn from it…:slight_smile: Thank you so much again…

Rajeev