• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Development / Working With CodeIgniter Image Manipulation library

Working With CodeIgniter Image Manipulation library

March 15, 2013 by Rana Ahsan 8 Comments

CodeIgniter Image Tutorial

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.


Read The Complete CodeIgniter Tutorials Series By CodeSamplez.com

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();


Checkout The CodeIngiter Image Manipulation Demo!

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

codeigniter image manipulation demo result

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 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Development Tagged With: codeigniter, image, php

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. kiru says

    August 5, 2014 at 5:22 am

    how to display image without folder and should directly come from database

    Reply
    • Md Ali Ahsan Rana says

      August 5, 2014 at 11:15 am

      You can do it by using a ‘blob’ type column in database table. Retrieval should be similar like other regular columns. For saving, you can refer to my codeigniter file upload tutorial. However, I don’t recommend this technique as this will make your database server slow.

      Reply
  2. freddy sidauruk says

    January 5, 2015 at 7:50 pm

    How about if we using type blob, is there heavy to load it ?

    Reply
  3. GPerdigiorno says

    January 25, 2015 at 3:40 pm

    It was very very useful to me, thank you!

    Reply
  4. Athira says

    October 16, 2015 at 1:43 am

    how I can do round image ?

    Reply
    • Md Ali Ahsan Rana says

      November 9, 2015 at 5:31 pm

      image can’t be made round by processing. It will always be an rectanglular. You can show it on web page as like rounded by applying some css. Simply google it.

      Reply
  5. Jason says

    January 6, 2017 at 2:51 am

    Nice post, Keep sharing

    Reply
  6. Manojkumar says

    September 22, 2017 at 6:03 am

    Hi Friends,

    In Codeigniter normally we load library $this->load->library(“libname”); so here we using $this->load->library(“app/uploader”); so is it this external library or default library.

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • Get Facebook C# Api Access Token
    Get Facebook C# Api Access Token
  • Beginning Codeigniter Application Development
    Beginning Codeigniter Application Development
  • How To Use Hotkeys/Keyboard Events In WPF Application Using C#
    How To Use Hotkeys/Keyboard Events In WPF Application Using C#
  • Control HTML5 Audio With Jquery
    Control HTML5 Audio With Jquery

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023