PHPBuilder - How to Resize and Crop GIF Animations in PHP



RSS Twitter
Articles

How to Resize and Crop GIF Animations in PHP

by: Voja Janjic
|
December 28, 2015

When resizing and cropping images, many popular PHP packages break the GIF animation and save it as a static image. However, it is possible to resize and crop image while keeping the animation intact. In PHP, this can be achieved by using the ImageMagick extension.

 

Installing ImageMagick

On most servers, ImageMagick is not installed by default. However, you can install it by running a couple of Linux commands. On CentOS operating systems, use the yum package manager.

 

First, install the required dependencies:

 

yum install -y gcc php-devel php-pear 

 

Install ImageMagick:

 

yum install -y ImageMagick ImageMagick-devel 

 

Install PHP extension:

 

pecl install imagick 

 

Restart Apache web server:

 

service httpd restart 

 

On Ubuntu server, do the same process. First, install the required dependencies:

 

sudo apt-get install php5 php5-common gcc 

 

Install ImageMagick:

 

sudo apt-get install imagemagick 

 

Install PHP extension:

 

sudo apt-get install php5-imagick 

 

Restart Apache:

 

service apache2 reload 

 

Resizing GIF Animations

To resize a GIF animation, we will use resizeImage function. However, since each animation consists of multiple images (frames), we need to loop through all of them, resize them one by one and merge them into one image again. In PHP, it is done like this:

 

// Create new Imagick class
$image_folder = 'images/';
$image_path = 'images/animation.gif'; 
$imagick = new \Imagick($image_path); // $image_path is the path to the image location

// Split gif animation into image
$imagick = $imagick->coalesceImages(); 

// Crop images one by one				  
do {
	 // First parameter is resized image width and second is resized image height
	 // If one of the params is set to zero, image will keep the aspect ratio
$imagick->resizeImage(580, 0, \Imagick::FILTER_BOX, 1);			     
} while ($imagick->nextImage());

// Reassemble the animation				  
$imagick = $imagick->deconstructImages();

// Save gif animation
// This would overwrite the original image
$imagick->writeImages($image_path, true); 

 

Cropping GIF Animations

For cropping an GIF animation, the same principle is used as for resizing them. The only difference is that cropImage function is used instead of resizeImage function. Here is the example:

 

// Create new Imagick class
$image_folder = 'images/';
$image_path = 'images/animation.gif'; 
$imagick = new \Imagick($image_path); // $image_path is the path to the image location

// Split gif animation into image
$imagick = $imagick->coalesceImages(); 

// Crop images one by one				  
do {
	 // First two params are width and height of the crop and third and fourth are the starting points of the crop
	 // E.g. if the last two params are 0,0, that means that cropping will start from the top left corner
	 $imagick->cropImage(400, 200, 0, 0);

	 // After the crop, there is some blank space remaining on the image since the image canvas has remained the same size
	 // This function resizes the image canvas and thus eliminates the blank space
               $imagick->setImagePage(400, 200, 0, 0);
				     
} while ($imagick->nextImage());

// Reassemble the animation				  
$imagick = $imagick->deconstructImages();

// Save gif animation
// This would overwrite the original image
$imagick->writeImages($image_path, true); 

 

Notes

Manipulating GIF animations require a lot of hardware resources and takes a significant amount of time. Have that in mind while building your web application.

 

Comment and Contribute

Your comment has been submitted and is pending approval.

Author:
Voja Janjic

Comment:



Comment:

(Maximum characters: 1200). You have characters left.