Working With CodeIgniter Image Manipulation library

Upload, crop, re-size etc are the basic image customization that most web sites or applications need to have. If we start implementing with native PHP support, then these functionality can be quite big and (may be) buggy also. Here comes the role of application framework. Codeigniter image manipulation library provides a very easy and efficient way to provide these kind of features, which requires least effort from developers. If you are a codeigniter developer, you must should take advantages of these given blessings of ready-made functionality. Lets have a look at these image modification techniques of codeigniter framework today. Hopefully, we will be able to save our development time and have bug-free robust implementation.

Upload An Image With CodeIngiter:

I strongly recommend to follow the codeigniter file upload tutorial first. Here you will see, how we can upload a file inside a codeigniter application easily. To upload image, only extra concern is to set the configuration file properly. The following properties are important part of image type file upload:

• max_height: Indicates the maximum height of the image file, allowed to be uploaded.
• max_width: Indicates the maximum height of the image file, allowed to be uploaded.
• max_size: Indicates the maximum size of the image file, allowed to be uploaded.
• allowed_types: Defined the type of images, allowed to be uploaded.

CodeIgniter Image Manipulation Library Configuration:

There are few settings which can be used commonly for all available operations. Those are given below:

• image_library: We can specify which image library to be used. Codeigniter supports GD, GD2, ImageMagic and NetPBM at this moment.
• source_image: The image to be processed.
• new_image: you may don’t want to change the original image and create new version of the modified one. In this case, use this configuration to specify the new image file full path/name.

Additionally, For our tutorial, we will be using the following common configuration loading code snippet:

$image_data                                  =   $this->upload->data();
$config["manipulation_type"]['source_image']      =   $image_data['full_path'];
$this->load->library('image_lib', $config["manipulation_type"]);

This is to be placed after the image file upload, where it takes the image data from “$this->upload->data()” method. Lets get into action.

Re-size An Image:

A typical configuration for resizing an image would be as below:

$config['resize'] =  array(
                  'image_library'   => 'gd2',
                  'maintain_ratio'  =>  TRUE,
                  'width'           =>  250,
                  'height'          =>  250,
                 
);

The ‘maintain_ratio’ property tells the library that, the original ration must need to be maintained while resizing, if set to ‘true’.

On controller, after the upload functionality, use the code workflow would as below:

//load/initialize the image library with resize specific configuration
$this->image_lib->resize();

Wow! See, how easy it is actually? We don’t need to get into all raw details of the task. Just setting configuration and call the method doing our work very fine. Rest of the operations are also as simple as this. Keep reading….

Crop An Image:

Lets use a sample configuration file to crop an image is much similar as re-size configuration:

$config['crop'] =  array(
                  'image_library'   => 'gd2',
                  'maintain_ratio'  =>  FALSE,
                  'width'           =>  250,
                  'height'          =>  250,
                 
);

Now, on controller, use the code workflow as below. This is almost similar as the re-size functionality, except the main ‘resize()’ method replaced by ‘crop()’ method.

//load/initialize the codeigniter image manipulation library with crop specific configuration
$this->image_lib->crop();

Rotate An Image:

Well, as the functionality indicates, we will must provide the rotation angle, how much the image will be rotated. Lets use the configuration as below:

$config['rotate'] =  array(
                  'image_library'   => 'gd2',
                  'rotation_angle' => 90
);

Similar as earlier implementations, same workflow will do the work here as well. except the core method call:

//load/initialize the codeigniter image library with rotate specific configuration
$this->image_lib->rotate();

Water-Mark An Image:

To watermark on an image, two important settings are the type of watermark(wm_type) and the watermark content (‘wm_text’ if type text , ‘wm_overlay_path’ if type image). There are many for settings for this feature, but, for now, the following settings will be enough to create a text watermark:

$config['watermark'] =  array(
                  'image_library'   => 'gd2',
                  'wm_text' => 'Copyright 2013 - CodeSamplez.com',
                  'wm_type' => 'text'
);

after uploading the image file and codeigniter image manipulation library loaded with correct configuration, the following code on controller will do the work of watermark properly:

//load/initialize the image library with watermark specific configuration
$this->image_lib->watermark();

Here is a screenshot about how the demo application would look like in rotation mode selected:

Further References:

Read the official image library documentation for in-depth details of the configuration settings. Please let me know if you are having any issue/comments. Happy coding 🙂