Codeigniter Compress Image Size Example

By Hardik Savani November 5, 2023 Category : PHP Codeigniter

We always looking for reduce image size when upload picture on our web application. we will learn how to compress and resize uploaded image in codeigniter 3 project. we will use image_lib library for compress image size in codeigniter. you can easily compress any image type like png, jpg, jpeg, gif etc

This example will help you to reduce size of image file like, if user uploaded 2mb file then it will compress in 400kb or something as you want less compress.

If you want to generate thumbnail image when user will upload image so you can follow this tutorial: Codeigniter 3 Resize image and create thumbnail image example.

You have to just follow few step to do this, i am going to show you from scratch so just follow bellow few step and get full example of resize image.

Step 1: Download Codeigniter 3

First of all, we should download fresh version of Codeigniter 3, so if you haven't download yet then download from here : Download Codeigniter 3.

Step 2: Create Routes

Here, we will add new routes for image upload. so open routes.php file and add code like as bellow:

application/config/routes.php

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

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['image-upload'] = 'ImageUpload';
$route['image-upload/post']['post'] = "ImageUpload/uploadImage";

Read Also: Codeigniter Multiple Database Connection Example

Step 3: Create ImageUpload Controller

now, we have to create "ImageUpload" controller with index(), uploadImage() and resizeImage(). so create ImageUpload.php file in this path application/controllers/ImageUpload.php and put bellow code in this file:

application/controllers/ImageUpload.php

<?php
   
class ImageUpload extends CI_Controller {
   
   /**
    * Manage __construct
    *
    * @return Response
   */
   public function __construct() { 
      parent::__construct(); 
      $this->load->helper(array('form', 'url')); 
   }
   
   /**
    * Manage index
    *
    * @return Response
   */
   public function index() { 
      $this->load->view('imageUploadForm', array('error' => '' )); 
   } 
   
   /**
    * Manage uploadImage
    *
    * @return Response
   */
   public function uploadImage() { 
   
      $config['upload_path']   = './uploads/'; 
      $config['allowed_types'] = 'gif|jpg|png'; 
      $config['max_size']      = 1024;
      $this->load->library('upload', $config);
   
      if ( ! $this->upload->do_upload('image')) {
         $error = array('error' => $this->upload->display_errors()); 
         $this->load->view('imageUploadForm', $error); 
      }else { 
  
        $uploadedImage = $this->upload->data();
        $this->resizeImage($uploadedImage['file_name']);
   
        print_r('Image Uploaded Successfully.');
        exit;
      } 
   }
  
   /**
    * Manage uploadImage
    *
    * @return Response
   */
   public function resizeImage($filename)
   {
      $source_path = $_SERVER['DOCUMENT_ROOT'] . '/uploads/' . $filename;
      $target_path = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';
      $config_manip = array(
          'image_library' => 'gd2',
          'source_image' => $source_path,
          'new_image' => $target_path,
          'maintain_ratio' => TRUE,
          'width' => 500,
      );
   
      $this->load->library('image_lib', $config_manip);
      if (!$this->image_lib->resize()) {
          echo $this->image_lib->display_errors();
      }
   
      $this->image_lib->clear();
   }
} 
?>

Step 4: Create View File

In this step we will create imageUploadForm.php view file . In this file we will write design of html form using form helper and url helper. So let's update following file:

application/views/imageUploadForm.php

Read Also: Codeigniter Form Validation with Error Message
<!DOCTYPE html>
<html> 
<head> 
  <title>Codeigniter Compress Image Size Example</title> 
</head>
  
<body> 
   
  <?php echo $error;?> 
     
  <form method='post' action='/image-upload/post' enctype='multipart/form-data'>
     <input type="file" name="image" size="20" />
     <input type="submit" value="upload" /> 
  </form> 
   
</body>
</html>

Now we are ready to run our example.

Now we need to create two folder. First you have to create "uploads".

After you run you will get image with resize.

You can download whole code from here: Download Code from Github

So let's run and see.

I hop it can help you...

Tags :
Previous

Laravel Vue Datatables Component Example
Next

JQuery Check If Value Exists or Not in Array Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares