ASPit - Totally ASP JSit - Totally JavaScript
Search PHPit

Use this textbox to search for articles on PHPit. Seperate keywords with a space.

Advertisements

Image manipulation with PHP & the GD library, Part 2

(Page 2 out of 3)

Online Thumbnail Creator

The first step in our online thumbnail creator is to create a form, and make it possible to upload an image. We did this in the previous article as well, so this shouldn't be a problem. See the example below:

if ($_POST) {
        // No image?
        if (empty($_FILES['image']) OR $_FILES['image']['error'] != UPLOAD_ERR_OK) {
                die ('Invalid image uploaded.  Please go back and try again.');
        }

        $imagepath = $_FILES['image']['tmp_name'];

        // Load image
        $image = open_image($imagepath);

        if ($image == false) {
                die ('You uploaded an invalid image. Please go back and try again.');
        }

        // TODO: resizing the image

}

// Display the upload form:
?>

       
                Image Resizer

       

       

       
               

"POST" enctype="multipart/form-data">
               
                       
                               
                               
                       

                       


                               
                               
                       

                       


                               
                               
                       

                       


                               
                               
                       

                       


                               
                               
                       

                       


               
       

Now that we have a form to upload the image and are able to specify how we want to resize it, we will have to write the actual code for resizing. All we need to do is use the code from the previous examples and combine it all together, to get the following result:

// Percentage?
if (!empty($_POST['percent']) AND is_numeric($_POST['percent'])) {
        $percent = floatval($_POST['percent']);
        $percent = $percent/100;

        $new_width = $width * $percent;
        $new_height = $height * $percent;

// New width? Calculate new height
} elseif (!empty($_POST['new_width']) AND is_numeric($_POST['new_width'])) {
        $new_width = floatval($_POST['new_width']);
        $new_height = $height * ($new_width/$width);

// New height? Calculate new width
} elseif (!empty($_POST['new_height']) AND is_numeric($_POST['new_height'])) {
        $new_height = floatval($_POST['new_height']);
        $new_width = $width * ($new_height/$height);

// New height and new width
} elseif (!empty($_POST['height']) AND is_numeric($_POST['height']) AND !empty($_POST['width']) AND is_numeric($_POST['width'])) {
        $new_height = floatval($_POST['height']);
        $new_width = floatval($_POST['width']);
} else {
        die ('You didn\'t specify any resizing options.');
}

As you can see in the example, we use a simple if-then-else structure to check all the resizing options, and you will probably recognize most of the code from the previous examples.

All that's left to do is resize the image, and then display it, using the following standard code:

// Resample
$image_resized = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

// Display resized image
header('Content-type: image/jpeg');
imagejpeg($image_resized);
die();

And that's all there is to it. We've now got a fully functional online image resizer, which can be used to resize almost any kind of image.

Click here to view a live demo of the image resizer, and click here to view the complete source code.

Let's have a look at another interesting use of PHP's image functions: watermarking images on the fly.

« Previous: Introduction & Resizing Images
Next: Watermarking Images & Conclusion »



5 Responses to “Image manipulation with PHP & the GD library, Part 2”

  1. vish Says:

    Hi
    i want to resample an image to half its original size but there are not properly done
    using the following code so please help me for solving the code :

    0) {
    $row = mysql_fetch_array ($result);
    $percent = 0.5; //ex

    $image_type = $row[”image_type”];
    $image = $row[”image”];
    $image_name = $row[”image_name”];

    header(’Content-type: $image_type’);

    // Get new dimensions
    $width = imagesx($image);
    $height = imagesx($image);

    $new_width = $width * $percent;
    $new_height = $height * $percent;

    // Resample
    $image_p = imagecreatetruecolor($new_width,$new_height);
    $imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
    // Output
    header(’Content-type: image/jpeg’);
    imagejpeg($image_p);

    Regards ,
    vish

    }
    ?>

  2. Harry D Says:

    Hi vish,

    while watching your code I found header(’Content-type: $image_type’); and header(’Content-type: image/jpeg’);.
    You can only send one header at once, not two. Just use the last one to make sure everything gets done before you put the resized image on screen.

    Then, if you need to resize gif and png you need another header, so implement a switch case i.e. to get the type and use the right functions for these types.

    best regards,

    Harald Doderer
    Director Emedian Ltd.
    www.emedian.net

  3. Ramesh N Sharma Says:

    short and useful tutorial

  4. Jawad Shuaib Says:

    Thank you so much for this tutorial. This is exactly what I was looking for :) Thank you!

  5. intekhab alam Says:

    it help me to solve my problem so thanyou very much.

Leave a Reply

About the author
Dennis Pallett is the main contributor to PHPit. He owns several websites, including ASPit and Chill2Music. He is currently still studying.
Article Index
  1. Introduction & Resizing Images
  2. Online Thumbnail Creator
  3. Watermarking Images & Conclusion
Bookmark Article
Download Article
PDF
Download this article as a PDF file

Image:"file" name="image">
Resize by: "text" name="percent" size="1" />% (percentage)
OR new width: "text" name="new_width" size="1" /> pixels (height will be calculated automatically)
OR new height: "text" name="new_height" size="1" /> pixels (width will be calculated automatically)
OR new height and new width:
                                       
                                               
                                               
                                       
width:"text" name="width" size="1" /> pixels
height:"text" name="height" size="1" /> pixels

                               
"2" style="text-align:center;">"submit" value="Resize Image" />