CodeSamplez.com

Programming, Web development, Cloud Technologies

  • Facebook
  • Google+
  • RSS
  • Twitter
  • 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
Home Development Working With CodeIgniter Image Manipulation library

Working With CodeIgniter Image Manipulation library

Rana Ahsan March 15, 2013 8 Comments


 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.


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 🙂

Related

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

About Rana Ahsan

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

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.

Email Subscription

Never miss any programming tutorial again.

Popular Tutorials

  • How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
  • Utilizing Config File In C#.NET Application
  • LinQ Query With Like Operator
  • Facebook C# API Tutorials
  • Few Important Basic Git Commands Examples
  • How To Work With C# Serial Port Communication
  • Using Supervisord Web Interface And Plugin
  • Getting Started With Smarty Template Engine
  • How To Use Hotkeys/Keyboard Events In WPF Application Using C#

Recent Tutorials

  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read
  • Getting Started With Golang Unit Testing
  • Getting Started With Big Data Analytics Pipeline
  • NodeJS Tips And Tricks For Beginners
  • Apple Push Notification Backend In NodeJS
  • Web Based Universal Language Translator, Voice/Text Messaging App
  • How To Dockerize A Multi-Container App From Scratch

Recent Comments

  • S. Chalisque on PHP HTML5 Video Streaming Tutorial
  • Armorik on Generate HTTP Requests using c#
  • iswaps on PHP HTML5 Video Streaming Tutorial
  • TAKONDWA on PHP HTML5 Video Streaming Tutorial
  • rorenzo on PHP HTML5 Video Streaming Tutorial

Archives

Resources

  • CodeSamplez.com Demo

Tags

.net apache api audio aws c# cache cloud server codeigniter deployment doctrine facebook git github golang htaccess html5 http image java javascript linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty ssh tfs thread tips ubuntu unit-test utility web application wordpress wpf

Copyright © 2010 - 2022 · CodeSamplez.com ·

Copyright © 2022 · Streamline Pro Theme on Genesis Framework · WordPress · Log in