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:
- Scaling on the X axis
- Scaling on the Y axis
- 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