Vamos a conocer como podemos realizar operaciones sobre imágenes en CodeIgniter 4; en otras palabras, el procesamiento digital de imágenes; vamos a conocer las comunes.
Para todas las operaciones, siempre tenemos que cargar la imagen que queremos procesar; para eso, tenemos un servicio en CodeIgniter 4:
$image = \Config\Services::image()
->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
De por medio, tenemos la operación que queremos realizar, rotar, escalar, crop...
Y finalmente, guardamos el resultado con:
save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');
Preparando nuestras operaciones sobre la manipulación de imágenes
Vamos a crear un archivo controlador y su respectiva clase en donde registramos estas operaciones:
class ImageManipulation extends BaseController
{
}
Ya con esto estamos listos para realizar cada una de las operaciones; entre las principales tenemos:
Rotar imágenes
Para rotar imágenes en 360 grados, tenemos la función llamada rotate la cual recibe los grados que deseas rotar:
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-escalar imágenes
La función llamada resize recibe tres parámetros:
- Escalado en el eje X
- Escalado en el eje Y
- Si deseas mantener las proporciones de la imagen o el 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');
}
O
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');
}
Cortar un fragmento de la imagen:
Para recortar una porción de la imagen, tenemos la función de image_crop, la cual le tienes que especificar una librería; generalmente se usa la de 'imagick' la cual nos permite hacer este tipo de operaciones fácilmente; la función crop recibe 4 puntos, que equivalen a la posición 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');
}
Bajar calidad de imágenes
Bajar la calidad de las imágenes es útil para reducir el peso sobre las mismas:
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);
}
El Factor, en este ejemplo 15 determina la calidad de la imagen, en donde 0 es lo menos posible y 100 por ciento es la calidad máxima.
Finalmente, el código completo del ejercicio:
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');
}
}
Puedes ver el código completo, este material forma parte de mi curso completo de CodeIgniter 4:
https://github.com/libredesarrollo/curso-codeigniter-4/blob/main/app/Controllers/ImageManipulation.php
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter