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.
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.
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.
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.
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.
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:
- 90 – It rotates clockwise by 90 degrees.
- 180 – It rotates clockwise by 90 degrees.
- 270 – It rotates clockwise by 90 degrees.
- hor - It is used to flip the image horizontally.
- 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.
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.
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.
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.
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.
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.
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();