Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Image Resizing Made Easy With PHP
  • dislike -1 19

    Image Resizing Made Easy With PHP

    1. January 2014
    2. Daily
    3. gelezen 0

    Ever wanted an all-purpose, easy-to-use method of resizing your images in PHP? Well, that's what PHP classes are for—reusable pieces of functionality that we call to do the dirty work behind the scenes. We're going to learn how to create our own class that will be well constructed and expandable. 

    Introduction

    To give you a quick glimpse of what we're trying to achieve with our class, the class should be:

    • easy to use
    • format independent: can open, resize, and save a number of different image formats
    • intelligent sizing: no image distortion!
    This isn't a tutorial on how to create classes and objects, and although this skill would help, it isn't necessary in order to follow this tutorial.

    There's a lot to cover—let's begin.

    1. Preparation

    The first step is easy. In your working directory, create two files: one called index.php and the other resize-class.php

    2. Calling the Object

    To give you an idea of what we're trying to achieve, we'll begin by coding the calls we'll use to resize the images. Open your index.php file and add the following code.

    As you can see, there is a nice logic to what we're doing. We open the image file, and we set the dimensions we want to resize the image to and the type of resizing. Then we save the image, choosing the image format and quality we want. Save and close your index.php file.

    // *** Include the class
include("resize-class.php");

// *** 1) Initialize / load image
$resizeObj = new resize('sample.jpg');

// *** 2) Resize image (options: exact, height, width, auto, crop)
$resizeObj -> resizeImage(150, 100, 'crop');

// *** 3) Save image
$resizeObj -> saveImage('sample-resized.gif', 100);

    From the code above, you can see we're opening a jpg file but saving a gif. Remember, it's all about flexibility.

    3. Create the Class Skeleton

    It's Object-Oriented Programming (OOP) that makes this sense of ease possible. Think of a class like a pattern; you can encapsulate the data—another jargon term that really just means hiding the data. We can then reuse this class over and over without the need to rewrite any of the resizing code—you only need to call the appropriate methods, just as we did in step 2. Once our pattern has been created, we create instances of this pattern, called objects.

    Let's begin creating our resize class. Open your resize-class.php file. Below is a really basic class skeleton structure which I've named resize. Note the class variable comment line; this is where we'll start adding our important class variables later.

    The construct function, known as a constructor, is a special class method (the term "method" is the same as function, however, and when talking about classes and objects the term method is often used) that gets called by the class when you create a new object. This makes it suitable for us to do some initializing—which we'll do in the next step.

    		Class resize
		{
			// *** Class variables

			public function __construct()
			{

			}
		}
    That's a double underscore for the construct method.

    4. Code the Constructor

    Now we're going to modify the constructor method above. Firstly, we'll pass in the filename (and path) of our image to be resized. We'll call this variable $fileName.

    We need to open the file passed in with PHP (more specifically the PHP GD Library) so PHP can read the image. We're doing this with the custom method openImage(). I'll get to the implementation of this method in a moment, but for now, we need to save the result as a class variable.

    A class variable is just a variable—but it's specific to that class. Remember the class variable comment I mentioned previously? Add $image as a private variable by typing private $image;. By setting the variable as private, you're limiting the scope of that variable so it can only be accessed by the class. From now on, we can make a call to our opened image, known as a resource, which we will be doing later when we resize.

    While we're at it, let's store the height and width of the image. I have a feeling these will be useful later.

    You should now have the following.

    		Class resize
		{
			// *** Class variables
			private $image;
			private $width;
			private $height;

			function __construct($fileName)
			{
			    // *** Open up the file
			    $this->image = $this->openImage($fileName);

			    // *** Get width and height
			    $this->width  = imagesx($this->image);
			    $this->height = imagesy($this->image);
			}
		}

    The imagesx() and imagesy() methods are built-in functions that are part of the GD library. They retrieve the width and height of your image, respectively.

    5. Opening the Image

    In the previous step, we called the custom method openImage(). In this step, we're going to implement the functionality inside that method. We want the script to do our thinking for us, so depending on what file type is passed in, the script should determine which GD Library function it calls to open the image. This is easily achieved by comparing the file's extension with a switch statement.

    We extract the extension from the filename by using the strrchr() function in PHP, which returns part of the main string from the last occurrence of the specified character till its end. For example, the filename papaya.jpg will give us .jpg, and the filename i.like.papaya.jpg will also give us .jpg.

    After determining the extension, we use the appropriate imagecreatefrom function to get back an image resource.

    private function openImage($file)
{
    // *** Get extension
    $extension = strtolower(strrchr($file, '.'));

    switch($extension)
    {
        case '.jpg':
        case '.jpeg':
            $img = @imagecreatefromjpeg($file);
            break;
        case '.gif':
            $img = @imagecreatefromgif($file);
            break;
        case '.png':
            $img = @imagecreatefrompng($file);
            break;
        default:
            $img = false;
            break;
    }
    return $img;
}

    6. How to Resize

    This step is really just an explanation of what we're going to do—so no homework here. In the next step, we're going to create a public method that we'll call to perform our resize, so it makes sense to pass in the width and height, as well as information about how we want to resize the image.

    Let's talk about this for a moment. There will be scenarios where you would like to resize an image to an exact size. Great, let's include this. But there will also be times when you have to resize hundreds of images and each image has a different aspect ratio—think portrait images. Resizing these to an exact size will cause severe distortion. If we take a look at our options to prevent distortion, we can:

    1. Resize the image as close as we can to our new image dimensions, while still keeping the aspect ratio.
    2. Resize the image as close as we can to our new image dimensions and crop the remainder.

    Both options are viable, depending on your needs.

    Yep. we're going to attempt to handle all of the above. To recap, we're going to provide options to:

    1. Resize by exact width/height. (exact)
    2. Resize by width—exact width will be set, height will be adjusted according to aspect ratio. (width)
    3. Resize by height—like resize by width, but the height will be set and width adjusted dynamically. (height)
    4. Auto-determine options 2 and 3. If you're looping through a folder with different size photos, let the script determine how to handle this. (auto)
    5. Resize, then crop. This is my favorite. Exact size, no distortion. (crop)

    7. Resizing. Let's Do It!

    There are two parts to the resize method. The first is getting the optimal width and height for our new image by creating some custom methods—and of course passing in our resize option as described above. The width and height are returned as an array and set to their respective variables. Feel free to pass by reference—but I'm not a huge fan of that.

    The second part is what performs the actual resizing. We will be using two built-in PHP functions for our resizing. They are:

    • <a href="https://php.net/manual/en/function.imagecreatetruecolor.php">imagecreatetruecolor</a>
    • <a href="https://php.net/manual/en/function.imagecopyresampled.php">imagecopyresampled</a>

    I recommend that you read about them in the documentation.

    In short, the imagecreatetruecolor() function will return an image object that represents a black image of a specified size. The imagecopyresampled() function is used to copy and resize part of an image with resampling.

    We also save the output of the imagecreatetruecolor() method (a new true color image) as a class variable. Add private $imageResized; with your other class variables.

    Resizing is performed by a PHP module known as the GD Library. Many of the methods we're using are provided by this library.

    // *** Add to class variables
private $imageResized;

public function resizeImage($newWidth, $newHeight, $option="auto")
{

	// *** Get optimal width and height - based on $option
	$optionArray = $this->getDimensions($newWidth, $newHeight, strtolower($option));

	$optimalWidth  = $optionArray['optimalWidth'];
	$optimalHeight = $optionArray['optimalHeight'];

	// *** Resample - create image canvas of x, y size
	$this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
	imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height);

	// *** if option is 'crop', then crop too
	if ($option == 'crop') {
		$this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
	}
}

    In the above code snippet, we calculate the new image dimensions and create a true color image object accordingly. This image object is then passed to imagecopyresampled() where the data from the original image is copied over it. Which part is copied depends on the rest of the parameters.

    8. The Decision Tree

    The more work you do now, the less you have to do when you resize. This method chooses the route to take, with the goal of getting the optimal resize width and height based on your resize option. It'll call the appropriate method, which we'll be creating in the next step.

    private function getDimensions($newWidth, $newHeight, $option)
{

   switch ($option)
    {
        case 'exact':
            $optimalWidth = $newWidth;
            $optimalHeight= $newHeight;
            break;
        case 'height':
            $optimalWidth = $this->getSizeByFixedHeight($newHeight);
            $optimalHeight= $newHeight;
            break;
        case 'width':
            $optimalWidth = $newWidth;
            $optimalHeight= $this->getSizeByFixedWidth($newWidth);
            break;
        case 'auto':
            $optionArray = $this->getSizeByAuto($newWidth, $newHeight);
			$optimalWidth = $optionArray['optimalWidth'];
			$optimalHeight = $optionArray['optimalHeight'];
            break;
		case 'crop':
            $optionArray = $this->getOptimalCrop($newWidth, $newHeight);
			$optimalWidth = $optionArray['optimalWidth'];
			$optimalHeight = $optionArray['optimalHeight'];
            break;
    }
	return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}

    At this point, we are simply calling different helper methods that we will implement in the next section.

    9. Optimal Dimensions

    When the resizing option is set to height or width, we use the aspect ratio of the original image to calculate the appropriate width and height for our new image.

    private function getSizeByFixedHeight($newHeight)
{
    $ratio = $this->width / $this->height;
    $newWidth = $newHeight * $ratio;
    return $newWidth;
}

private function getSizeByFixedWidth($newWidth)
{
    $ratio = $this->height / $this->width;
    $newHeight = $newWidth * $ratio;
    return $newHeight;
}

    When the resizing option is set to auto, we use the original width and height of the image to determine whether the resized image should have a fixed width or height. For images in landscape orientation, we keep the width fixed. For images in portrait orientation, we keep the height fixed. If the original image is a square, we pick the fixed dimension using the new width and height value.

    private function getSizeByAuto($newWidth, $newHeight)
{
    if ($this->height < $this->width)
    // *** Image to be resized is wider (landscape)
    {
        $optimalWidth = $newWidth;
        $optimalHeight= $this->getSizeByFixedWidth($newWidth);
    }
    elseif ($this->height > $this->width)
    // *** Image to be resized is taller (portrait)
    {
        $optimalWidth = $this->getSizeByFixedHeight($newHeight);
        $optimalHeight= $newHeight;
    }
    else
    // *** Image to be resized is a square
    {
		if ($newHeight < $newWidth) {
			$optimalWidth = $newWidth;
			$optimalHeight= $this->getSizeByFixedWidth($newWidth);
		} else if ($newHeight > $newWidth) {
			$optimalWidth = $this->getSizeByFixedHeight($newHeight);
		    $optimalHeight= $newHeight;
		} else {
			// *** Square being resized to a square
			$optimalWidth = $newWidth;
			$optimalHeight= $newHeight;
		}
    }

	return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}

private function getOptimalCrop($newWidth, $newHeight)
{

	$heightRatio = $this->height / $newHeight;
	$widthRatio  = $this->width /  $newWidth;

	if ($heightRatio < $widthRatio) {
		$optimalRatio = $heightRatio;
	} else {
		$optimalRatio = $widthRatio;
	}

	$optimalHeight = $this->height / $optimalRatio;
	$optimalWidth  = $this->width  / $optimalRatio;

	return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}

    The getOptimalCrop() method might seem a bit confusing at first because we are still calculating $optimalHeight and $optimalWidth, which we use for resizing. The reason is that instead of cropping the image directly to the specified width and height, our class crops the images after resizing.

    Let's say the dimensions of an image are 1920w and 1080h, and you want to crop it to 1200w and 200h. As you can see, the ratio of the original width to the new width will be lower than the corresponding height ratio. Therefore, the image will first need to be resized in such a way that its width comes down to 1200 and the height changes accordingly.

    The actual cropping of the image will be done after the resizing is complete.

    10. Crop

    If you opted for a crop—that is, you've used the crop option—then you have one more little step. We're going to crop the image from the center. Cropping is a very similar process to resizing but with a couple more sizing parameters passed in.

    private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
{
	// *** Find center - this will be used for the crop
	$cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
	$cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );

	$crop = $this->imageResized;
	//imagedestroy($this->imageResized);

	// *** Now crop from center to exact requested size
	$this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
	imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight);
}

    11. Save the Image

    We're getting there; almost done. It's now time to save the image. We pass in the path and specify the image quality we would like ranging from 0-100, 100 being the best. Then we call the appropriate method. A couple of things to note about the image quality: JPG uses a scale of 0-100, 100 being the best. GIF images don't have an image quality setting. PNGs do, but they use the scale 0-9, 0 being the best. This isn't good as we can't expect ourselves to remember this every time we want to save an image. So we can do a bit of magic to standardize everything.

    public function saveImage($savePath, $imageQuality="100")
{
	// *** Get extension
	$extension = strrchr($savePath, '.');
	$extension = strtolower($extension);

	switch($extension)
	{
		case '.jpg':
		case '.jpeg':
			if (imagetypes() & IMG_JPG) {
				imagejpeg($this->imageResized, $savePath, $imageQuality);
			}
            break;

		case '.gif':
			if (imagetypes() & IMG_GIF) {
				imagegif($this->imageResized, $savePath);
			}
			break;

		case '.png':
			// *** Scale quality from 0-100 to 0-9
			$scaleQuality = round(($imageQuality/100) * 9);

			// *** Invert quality setting as 0 is best, not 9
			$invertScaleQuality = 9 - $scaleQuality;

			if (imagetypes() & IMG_PNG) {
				imagepng($this->imageResized, $savePath, $invertScaleQuality);
			}
			break;

		// ... etc

		default:
			// *** No extension - No save.
			break;
	}

	imagedestroy($this->imageResized);
}

    Now is also a good time to destroy our image resource to free up some memory. If you were to use this in production, it might also be a good idea to capture and return the result of the saved image.

    Conclusion

    Well, that's it, folks. Thank you for following this tutorial, and I hope you find it useful.

    This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    Plaats reactie...
    4elements
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News