Procesamiento digital de imagenes en CodeIgniter 4

• Categorías
• /
• CodeIgniter
• /
• Procesamiento digital de imagenes en CodeIgniter 4

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:

1. Escalado en el eje X
2. Escalado en el eje Y
3. 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

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy