Digital image processing in CodeIgniter 4

• Categories
• /
• CodeIgniter
• /
• Digital image processing in CodeIgniter 4

We are going to know how we can perform operations on images in CodeIgniter 4; in other words, digital image processing; we are going to know the common ones.

For all operations, we always have to load the image we want to process; for that, we have a service in CodeIgniter 4:

$image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')

In between, we have the operation we want to perform, rotate, scale, crop...

And finally, we save the result with:

save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');

Preparing our operations on image manipulation

We are going to create a controller file and its respective class where we register these operations:

class ImageManipulation extends BaseController
{
}

Now with this we are ready to perform each of the operations; among the main ones we have:

Rotate images

To rotate images 360 degrees, we have a function called rotate which receives the degrees you want to rotate:

    public function image_rotate()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->rotate(270)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');
    }

Re-scale images

The function called resize takes three parameters:

1. Scaling on the X axis
2. Scaling on the Y axis
3. If you want to keep the image proportions or aspect ratio

    public function image_resize()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->resize(100, 100,false)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_resize.png');
    }

Or

    public function image_fit()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->fit(100, 100, 'center')
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_fit.png');
    }

Cut a fragment of the image:

To crop a portion of the image, we have the image_crop function, which you have to specify a library for; generally the one of 'imagick' is used, which allows us to do this type of operation easily; the crop function receives 4 points, which is equal to the position x1,y1 - x2,y2

    public function image_crop()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->crop(50, 50, $xOffset, $yOffset)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_crop.png');
    }

Lower image quality

Lowering the quality of the images is useful to reduce the weight on them:

   public function image_quality()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->fit(300, 300, 'center')
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_quality.png', 15);
    }

The Factor, in this example 15 determines the quality of the image, where 0 is the least possible and 100 percent is the highest quality.

Finally, the complete code of the exercise:

class ImageManipulation extends BaseController
{
    public function image_fit()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->fit(100, 100, 'center')
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_fit.png');
    }
 
    public function image_rotate()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->rotate(270)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');
    }
    public function image_resize()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->resize(100, 100,false)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_resize.png');
    }
    public function image_quality()
    {
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->fit(300, 300, 'center')
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_quality.png', 15);
    }
    public function image_crop()
    {
        /* $info = \Config\Services::image('imagick')
        ->withFile(WRITEPATH.'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
        ->getFile()
        ->getProperties(true);
        $xOffset = ($info['width'] / 2) - 25;
        $yOffset = ($info['height'] / 2) - 25;*/
        $xOffset = 100;
        $yOffset = 100;
        $image = \Config\Services::image()
            ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
            ->crop(50, 50, $xOffset, $yOffset)
            ->save(WRITEPATH . 'uploads/imagemanipulation/image_crop.png');
    }
}

You can see the complete code, this material is part of my complete CodeIgniter 4 course:

https://github.com/libredesarrollo/curso-codeigniter-4/blob/main/app/Controllers/ImageManipulation.php

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy