Image Manipulation Codeigniter

Image Manipulation

A Codeigniter provides an image manipulation class that is used for resizing, cropping, rotation, and many other manipulation tasks. This class also support three major image libraries such as GD/GD2, NetPBM, and ImageMagick.

Loading the Image manipulation Class

Most of the CodeIgniter’s Library, you must to load an image manipulation class in the controller’ file by using the following Syntax.

$this->load->library( ‘image_lib’ );

Once the class is loaded, the image library object can be used by this syntax: $this->image_lib.

Processing Methods

These are the following methods for processing an image manipulation:

  • $this->image_lib->resize()
  • $this->image_lib->rotate()
  • $this->image_lib->crop()
  • $this->image_lib->watermark()

Before creating an image manipulation program, you must define a source folder "images", that contains all the images stored in your Codeigniter application.

Image Manipulation

And if you want to define a new path for storing the images, you can define either the new folder path or to create a new folder, such as \www\CodeIgniter-3.1.11\Files.

Class References:

1. initialize(): As the name defines, it is used to initialize an image processing preference in a manipulation class. If the image preferences are successfully set, it returns TRUE, otherwise, it shows FALSE.

Syntax

initialize ( [ $props = array() ] );

$props (array): It defines an image processing property.

2. resize(): A resize () function is used to resize the original image such as: to make a copy of the original image with or without resizing, and to create a thumbnail image.

Syntax

$this->image_lib->resize():

Example: write a program to resize an image in the Codeigniter application.

Create a controller file Image_manipulate.php and save it in application/controller/Image_manipulate.php. After that, write the following program in the controller file.

Image_manipulate.php

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  class Image_manipulate extends CI_Controller 
 {
 public function resize_image()
             { 
 echo "<title> Tutorial and Example </title>";
 $this->load->library('image_lib'); 
    $config['image_library'] = 'gd2';
 $config['source_image'] = 'images/download.jpg';
 $config['new_image'] = './Files/new_image.jpg';
 $config['create_thumb'] = False;
 $config['maintain_ratio'] = TRUE;
 $config['width']         = 500; 
 $config['height']       = 400;
 $this->image_lib->initialize($config);
 if ( ! $this->image_lib->resize())
 {
         echo $this->image_lib->display_errors();
 }
 else 
 echo "Your image has been successfully Resized";
             }
 }
 ?> 

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/Image_manipulate/ and call the resize_image function, it shows the output, as shown below.

Image Manipulation

If you want to check that your image has been resized, go to this path \www\CodeIgniter-3.1.11\Files; And you will see a resizing image with a new name, which you gave new_name.jpg in the program.

Image Manipulation
Image Manipulation

Thumbnail Image:

The resizing() method provide a thumbnail marker that is used to create a thumbnail file by setting this preference to TRUE:

$config[ ‘create_thumb’ ] = TRUE;

Note: It add a _thumb name as a suffix to the original file such as img.jpg to img_thumb.jpg.

Copy of the Original Image:

If you want to create a copy of the original image file, you have to define a new path to store the original file according to the set preferences as given below:

$config[ ‘new_image’ ] = ‘/path/to/new_image_file.jpg’;

Important notes for resizing the images path:

  • If you specified only the new image name in the source_image path, it shows a new image file with the original file in the same folder.
  • If you have defined only the path without the new image name, the image file will be placed at the specified path with the original name.
  • And if you have provided the path and image name, the file will be stored in a defined path with the new name.

3. crop(): A cropping function is used to crop the original image as per the preferences set for x and y direction (in pixel) in the image class, such as:

$config[ ‘x_axis’ ] = 150;

$config[ ‘y_axis’ ] = 50;

Syntax

$this->image_lib->crop();

Example: write a program to crop an image in the codeigniter application.

Create a controller file Image_manipulate.php and save it in application/controller/Image_manipulate.php. After that, write the following program in the controller file.

Image_manipulate.php

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  class Image_manipulate extends CI_Controller 
 {
 public function crop_image()
             {                      
                         echo "<title> Tutorial and Example </title>";
                         $this->load->library('image_lib');
                         $config['image_library'] = 'GD2'; 
                         $config['source_image'] = 'images/cloud.jpg';
                         $config['new_image'] = './Files/crop_image.jpg';
                         $config['maintain_ratio'] = TRUE;
                         $config['width']         = 700;  
                         $config['height']       = 400;
                         $config['x_axis'] = 150;
 $config['y_axis'] = 80;
 $this->image_lib->initialize($config);
 if ( ! $this->image_lib->crop())
 {
             echo $this->image_lib->display_errors();
 }
 else
 echo "Successfully cropped";
             }
 }
 ?> 

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/Image_manipulate/ and call the crop_image function, it shows the output, as shown below.

Image Manipulation

Similarly, to the resized, you can check your image has been successfully cropped in the defined folder \www\CodeIgniter-3.1.11\Files; with a new name, that you have provided “crop_image.jpg” in the program.

Image Manipulation

4. rotate(): A rotation() function is used to rotate an image based on the preferences set for an angle of rotation in the image class, such as:

$config[ ‘rotation_angle’ ] = ‘180’;

Syntax

$this->image_lib->rotate();

These are the five angles of rotation available in the image manipulation class:

  1. 90 – It rotates clockwise by 90 degrees.
  2. 180 – It rotates clockwise by 90 degrees.
  3. 270 – It rotates clockwise by 90 degrees.
  4. hor - It is used to flip the image horizontally.
  5. vrt - It is used to flip the image vertically.

Example: write a program to rotate an image in the codeigniter application.

Create a controller file Image_manipulate.php and save it in application/controller/Image_manipulate.php. After that, write the following program in the controller file.

Image_manipulate.php

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  class Image_manipulate extends CI_Controller 
 {
 public function rotate_image()
             {                      
                         echo "<title> Tutorial and Example </title>";
                         $this->load->library('image_lib');        
                         $config['image_library'] = 'GD2';
                         $config['source_image'] = './Files/crop_image.jpg';
                         $config['maintain_ratio'] = TRUE;
                         $config['rotation_angle'] = '90';
                         $config['width']         = 200;
                         $config['height']       = 100;
 $this->image_lib->initialize($config);
 if ( ! $this->image_lib->rotate())
 {
             echo $this->image_lib->display_errors();
 }
 else
 echo "Your image has been Successfully Rotated ";
             }
 }
 ?> 

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/ Image_manipulate/ and call the resize_image function, it shows the output, as shown below.

Image Manipulation

If you want to check that your image has been resized, go to this path \www\CodeIgniter-3.1.11\Files; And you will see a rotated image with a name crop_image.jpg in the program.

Image Manipulation

5. watermark(): As the function name defines, it is used to create a watermark text and image on the given image.

Syntax

$this->image_lib->watermark();

Note: A watermarking feature consists the GD/GD2 library to create watermark text and overlaying on the source image.

Types of Watermarking in an image manipulation class

A CodeIgniter provides two methods for watermarking in the image class.

1. Text watermark. (wm_text)

As the name defines, it is used to generate a watermark text over the source image on the basis of the text, and type set in a watermark() function, such as:

            $config [‘wm_text’] = ‘Copyright @2020 - Tutorial and example.com’;
             $config [‘wm_type’] = ‘text’; 

Example: write a program to shows a watermark text on an image.

Create a controller file Image_manipulate.php and save it in application/controller/Image_manipulate.php. After that, write the following program in the controller file.

Image_manipulate.php

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  class Image_manipulate extends CI_Controller 
 {
 public function water_text()
 { 
 echo "<title> Tutorial and Example </title>";
 $this->load->library('image_lib');
 $config['image_library'] = 'gd2';
 $config['source_image'] = 'images/cloud.jpg';
 $config['wm_text'] = 'Codeigniter @2020 - Tutorial and Example.com';
 $config['wm_type'] = 'text';
 $config['wm_font_path'] = './system/fonts/texb.ttf';
 $config['new_image'] = './Files/water_text.jpg';
 $config['maintain_ratio'] = TRUE;
 $config['width']         = '700';
 $config['wm_font_size'] = '32';
 $config['wm_font_color'] = '#4f1a10';
 $config['wm_vrt_alignment'] = 'middle';
 $config['wm_hor_alignment'] = 'center';
 $config['wm_padding'] = '5';
 $config['wm_margin'] = '20';
 $this->image_lib->initialize($config); 
 if ( ! $this->image_lib->watermark())
 {
         echo $this->image_lib->display_errors();
 }
 else
 echo "Your image has been successfully watermarked with text";
             }
 }
 ?> 

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/Image_manipulate/water_text function, it shows the output, as shown below.

Image Manipulation

If you want to check that your image has accessed a watermark text, follow this path \www\CodeIgniter-3.1.11\Files; And you will see a watermark text image with a new name, that you gave water_text.jpg in the program.

Image Manipulation

2. Image Overlay Watermark (wm_overlay_path)

It enables you to generate a watermark message by overlaying an image over the source image, such as:

$config [‘wm_type’] = ‘overlay’;
 $config [‘wm_overlay_path’] = ‘Files/image.jpg’; 

Example: write a program to overlay an image over the other image.

Create a controller file Image_manipulate.php and save it in application/controller/Image_manipulate.php. After that, write the following program in the controller file.

Image_manipulate.php

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  class Image_manipulate extends CI_Controller 
 {
 public function water()
             {
  echo "<title> Tutorial and Example </title>";
 $this->load->library('image_lib'); 
 $config['image_library'] = 'gd/gd2';
 $config['source_image'] = 'images/picture.jpg'; // It is the name of the source image
 $config['wm_text'] = 'Tutorial and Example.com';
 $config['wm_type'] = 'overlay'; // It shows the type of watermark()
 $config['wm_overlay_path'] = 'images/valley.jpg'; // it is the name of the other image
 $config['wm_font_path'] = './system/fonts/texb.ttf';
 $config['wm_font_size'] = '20';
 $config['wm_font_color'] = '#4f1a10';
 $config['wm_vrt_alignment'] = 'middle';
 $config['wm_hor_alignment'] = 'center';
 $this->image_lib->initialize($config);
 if ( ! $this->image_lib->watermark())
 {
         echo $this->image_lib->display_errors();
 }
 else
 echo "Your image has been successfully overlay with another image ";
             }
 }
 ?> 

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/Image_manipulate/ and call an overlay_image function, it shows the output, as shown below.

Image Manipulation

If you want to check that your image has been successfully overlaying with another image, go to this path \www\CodeIgniter-3.1.11\images; And you will see the source image with an overlay image in the program.

Image Manipulation

6. clear(): As the name defines, a clear() function is used to reset all the values that has been set during an image processing.

Syntax

$this->image_lib->clear(); 

7. display_error(): As the name suggests, a display_error() function is used to show all detected error messages during an image processing.

Syntax

echo $this->image_lib->display_errors();