Codeigniter 4 Resize Image With Image Manipulation Tutorial Example

Hi guys,

Today i will explained Resize Image With Image Manipulation Tutorial Example in Codeigniter 4. This example is so easy to use in Codeigniter 4.

This detailed guide explains how to easily create image upload and compress image file size in the Codeigniter app using the image manipulation class.

This Codeigniter compress image size example will help you build the feature through which you can reduce image size, assume if you upload a one mb file, then you can lower down the size of the image and upload the compressed image file to the server.

So let's start to the example.

Step 1 : Create Codeigniter App

Codeigniter Project Project install in your system.

composer create-project codeigniter4/appstarter

Step 2 : Enable Error Handling

To quickly and easily debug the unwonted errors requires you to update the display_errors property, head over to app/Config/Boot/development.php and app/Config/Boot/production.php files and change the display_errors to 1 from 0.

ini_set('display_errors', '1');

Step 3 : Create Files Table

Then next step to create table.

CREATE TABLE profiles (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'File Name',
    type varchar(255) NOT NULL COMMENT 'File Type',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='Profiles table' AUTO_INCREMENT=1;

Step 4 : Connect to Database

Open the app/Config/Database.php, and insert database name, username and password into the file.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'codeigniter_db',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

If you are skeptical about the Unable to connect database: Codeigniter error; then make sure you have added the either of the hostname in the db connection $default variable.

# ====== MAMP
public $default = [
  'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
]

# ====== XAMP
public $default = [
  'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
]

Step 5 : Create Image Resize Controller

Please create a new controller file, get to the the app/Controllers directory, create a file and name it ImgManipulationController.php.

Open app/Controllers/ImgManipulationController.php and update the given code.

<?php 
namespace App\Controllers;
use CodeIgniter\Controller;

class ImgManipulationController extends Controller
{
    public function index() 
    { 
        return view('image');
    }
   
    public function upload()
    {
        helper(['form', 'url']); 
        $database = \Config\Database::connect();
        $db = $database->table('profiles');
   
        $validateImg = $this->validate([
            'file' => [
                'uploaded[file]',
                'mime_in[file,image/jpg,image/jpeg,image/png,image/gif]',
                'max_size[file,4096]',
            ]
        ]);
       
        if (!$validateImg) {
            print_r('Eiter file type or size (Max 4MB) not correct.');
        } else {
            $x_file = $this->request->getFile('file');
            $image = \Config\Services::image()
                ->withFile($x_file)
                ->resize(100, 100, true, 'height')
                ->save(FCPATH .'/images/'. $x_file->getRandomName());

            $x_file->move(WRITEPATH . 'uploads');
            $fileData = [
                'name' =>  $x_file->getName(),
                'type'  => $x_file->getClientMimeType()
            ];

            $store = $db->insert($fileData);
            print_r('Image resized and stored.');
        } 
    }
}

Create the ‘images’ folder into the ‘public’ directory; here, cropped images are kept.

Step 6 : Add New Route

next to make the route for showing charts, you need to go to app/Config/Routes.php and define the given below routes in the file

$routes->setDefaultController('ImgManipulationController');
$routes->get('/', 'ImgManipulationController::index');

Step 7 : Create File Upload Form

To compress the image, create a basic file upload form, get into the app/Views directory, there you need to create a new view file, name it image.php furthermore insert the following code into the app/Views/image.php file.

<!DOCTYPE html>
<html>
<head>
    <title>Codeigniter 4 Resize Image With Image Manipulation Tutorial Example - Nicesnippets.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5" style="max-width: 550px">
        <h2 class="mb-4 text-center">Codeigniter 4 Resize Image With Image Manipulation Tutorial Example</h2>

        <form method='post' action='<?php echo base_url(); ?>/ImgManipulationController/upload'
            enctype='multipart/form-data'>

            <div class="form-group">
                <label for="formFileLg" class="form-label">Select image :</label>
                <input class="form-control form-control-lg" type="file" name="file">
            </div>

            <div class="d-grid mt-3">
                <input type="submit" value="Upload Image" class="btn btn-outline-primary" />
            </div>
        </form>
    </div>
</body>
</html>

Step 8 : Test Codeigniter App

In this last step, you have to open the terminal, type command to run the application.

php spark serve

Then next run the url in your browser.

http://localhost:8080

Output

Now you can check your own.

I hope it can help you...