Upload and Crop Image using Codeigniter

This tutorial will show you how to upload and crop image using Codeigniter. CodeIgniter’s File Uploading Class permits files to be uploaded. Codeigniter’s Image Library class allows us to process images, such as, crop, resize, rotate, watermark etc. You can set various preferences, restricting the type and size of the files.

So here we will upload the image first and then crop the image.


Apache 2.4, PHP 7.3.5, Codeigniter 3.1.10

Recommended Reading: Upload and Resize Image using Codeigniter and Upload and Rotate Image using Codeigniter

Example Implementation

Creating Project Directory

We need to first create our root project directory in order to implement the Codeigniter multi-language website.

It’s assumed that you have setup Apache 2.4, PHP 7.3.5 and Codeigniter 3.1.10 in Windows system.

Next we will create a project root directory called codeIgniter-3.1.10-crop-image under the Apache server’s htdocs folder.

Now move all the directories and files from Codeigniter 3.1.10 framework into codeIgniter-3.1.10-crop-image directory.

We may not mention the project root directory in subsequent sections and we will assume that we are talking with respect to the project root directory.

Autoload Configuration

We need some configurations, such as, auto-loading for helpers to avoid loading every time we need to use.

$autoload['helper'] = array('html', 'url', 'file');

Creating Controller Class

Create a controller file ImageCrop.php under application/controllers with the following source code.

The below controller class handles request and response for clients.

We define here method for performing upload and crop operations.

The controller class has one method called index() that uploads the image, loads the ImageMagick library & crops the image with the defined configurations in image_lib and sends to the view file.

We perform validations on input fields while uploading and cropping image.

Download ImageMagick library from http://www.imagemagick.org/script/binary-releases.php. Now extract the downloaded library (ImageMagick-7.0.8-56-portable-Q16-x64.zip) under application folder.

You need to download the library according to your Operating System version.

If you prefer not to set preferences using method $this->load->library('image_lib', $config), you can instead put them into a config file.

Simply create a new file called image_lib.php, add the $config array in that file. Then save the file in config/image_lib.php and it will be used automatically.


defined('BASEPATH') OR exit('No direct script access allowed');

 * Description of ImageUpload
 * @author https://roytuts.com
class ImageCrop extends CI_Controller {

    //variable for storing error message
    private $error;
    //variable for storing success message
    private $success;

    function __construct() {
        //load this to validate the inputs in upload form

    //appends all error messages
    private function handle_error($err) {
        $this->error .= nl2br($err . "\n");

    //appends all success messages
    private function handle_success($succ) {
        $this->success .= nl2br($succ . "\n");

    public function index() {
        if ($this->input->post('image_crop')) {
            //set preferences
            //file upload destination
            $upload_path = './upload/';
            $config['upload_path'] = $upload_path;
            //allowed file types. * means all types
            $config['allowed_types'] = 'jpg|png|gif';
            //allowed max file size. 0 means unlimited file size
            $config['max_size'] = '0';
            //max file name size
            $config['max_filename'] = '255';
            //whether file name should be encrypted or not
            $config['encrypt_name'] = TRUE;
            //store image info once uploaded
            $image_data = array();
            //check for errors
            $is_file_error = FALSE;
            //check if file was selected for upload
            if (!$_FILES) {
                $is_file_error = TRUE;
                $this->handle_error('Select an image file.');
            //if file was selected then proceed to upload
            if (!$is_file_error) {
                //load the preferences
                $this->load->library('upload', $config);
                //check file successfully uploaded. 'image_name' is the name of the input
                if (!$this->upload->do_upload('image_name')) {
                    //if file upload failed then catch the errors
                    $is_file_error = TRUE;
                } else {
                    //store the file info
                    $image_data = $this->upload->data();
                    $config['image_library'] = 'imagemagick';
                    $config['library_path'] = APPPATH . 'ImageMagick-7.0.8-56-portable-Q16-x64';
                    $config['source_image'] = $image_data['full_path']; //get original image
                    $config['x_axis'] = 100;
                    $config['y_axis'] = 60;
                    $this->load->library('image_lib', $config);
                    if (!$this->image_lib->crop()) {
            // There were errors, we have to delete the uploaded image
            if ($is_file_error) {
                if ($image_data) {
                    $file = $upload_path . $image_data['file_name'];
                    if (file_exists($file)) {
            } else {
                $data['resize_img'] = $upload_path . $image_data['file_name'];
                $this->handle_success('Image was successfully uploaded to direcoty <strong>' . $upload_path . '</strong> and croped.');

        //load the error and success messages
        $data['errors'] = $this->error;
        $data['success'] = $this->success;
        //load the view along with data
        $this->load->view('crop', $data);


Creating View Files

We will create few view files to perform our crop operation on image.

Create a view file called crop.php under application/views which will be used for uploading image and displaying cropped image.

This file defines a form for uploading image file and shows validations errors or success messages based on the criteria.

defined('BASEPATH') OR exit('No direct script access allowed');
<!DOCTYPE html>
        <meta charset="UTF-8">
        <title>Codeigniter Image Crop</title>
        <style type="text/css">

            ::selection { background-color: #E13300; color: white; }
            ::-moz-selection { background-color: #E13300; color: white; }

            body {
                background-color: #fff;
                margin: 40px;
                font: 13px/20px normal Helvetica, Arial, sans-serif;
                color: #4F5155;

            #body {
                margin: 0 15px 0 15px;

            #container {
                margin: 10px;
                border: 1px solid #D0D0D0;
                box-shadow: 0 0 8px #D0D0D0;

            .error {
                color: #E13300;

            .success {
                color: darkgreen;
        <div id="container">
            <h1>CodeIgniter Image Crop</h1>

            <div id="body">
                <p>Select an image file to crop</p>
                if (isset($success) && strlen($success)) {
                    echo '<div class="success">';
                    echo '<p>' . $success . '</p>';
                    echo '</div>';
                if (isset($errors) && strlen($errors)) {
                    echo '<div class="error">';
                    echo '<p>' . $errors . '</p>';
                    echo '</div>';
                if (validation_errors()) {
                    echo validation_errors('<div class="error">', '</div>');
                if (isset($resize_img)) {
                    echo img($resize_img);
                $attributes = array('name' => 'image_upload_form', 'id' => 'image_upload_form');
                echo form_open_multipart($this->uri->uri_string(), $attributes);
                <p><input name="image_name" id="image_name" readonly="readonly" type="file" /></p>
                <p><input name="image_crop" value="Upload Image" type="submit" /></p>
                echo form_close();


Configuring Route

Now modify application/config/routes.php file for pointing the default controller class.

$route['default_controller'] = 'imagecrop';

Testing the Application

Home Page

Now if everything is fine run the application by hitting the URL http://[::1]/codeIgniter-3.1.10-crop-image/index.php, you will see below output in the browser.

upload and crop image using codeigniter

Uploaded and Cropped Image

Now browse and select an image file, the file will be uploaded to application/upload directory with reduced size and the cropped image will be displayed on browser.

Make sure upload directory exists under project root directory.

upload and crop image using codeigniter

Source Code

download source code

Thanks for reading.

1 thought on “Upload and Crop Image using Codeigniter

  1. You have to upload live demo example of these code beacuse without demo its not possible to recognise properly.

Leave a Reply

Your email address will not be published. Required fields are marked *