En esta entrada veremos cómo aplicar procesamiento digital de imágenes en CodeIgniter, realizando operaciones simples que podemos realizar con editores de imágenes sencillos como PAINT o GIMP, pero de manera programática empleando PHP mediante CodeIgniter.
Ya hemos visto en anteriores entradas como realizar distintos tipos de tareas, funcionalidades, operaciones etc empleando el framework PHP CodeIgniter:
- Upload de archivos con Codeigniter
- Cargar de archivos con Codeigniter y Dropzone
- ¿Cómo redimensionar imágenes con CodeIgniter?
Por lo tanto ya tenemos parte del proceso que se encarga de subir las imágenes a nuestro servidor, ahora veamos cómo realizar un procesamiento digital de imágenes simple en CodeIgniter.
¿A qué nos referimos con procesamiento digital de imágenes?
A realizar operaciones simples sobre las imágenes como rotaciones de 90, 180, 270 grados, recortes, reescalado, marcas de agua variar la calidad de las imágenes e inclusive especificar si deseamos sobreescribir la imagen existente o generar una nueva.
Todo esto sin necesidad de emplear un software de un tercero como GIMP, Photoshop, etc.
Todas estas operaciones se realizan sobre imágenes cargadas en nuestro servidor mediante el ya conocido método de carga que ofrece CodeIgniter o cargadas mediante cualquier otra forma (lo importante es que existan imágenes que se puedan consultar):
De nuestra parte queda indicar si queremos aplicar operaciones sobre las imágenes, si justo después de realizar la carga de las imágenes, o en una tarea o módulo aparte.
Reescalado de las imágenes
public function resize() {
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = 'uploads/paysheet/image.jpg';
$config['maintain_ratio'] = TRUE;
//$config['new_image'] = 'uploads/paysheet/new_image.jpg';
$config['width'] = 100;
$config['height'] = 100;
$this->image_lib->clear();
$this->image_lib->initialize($config);
if (!$this->image_lib->resize()) {
echo $this->image_lib->display_errors();
}
}
El código en general es bastante sencillo; primero cargamos la libreria para el procesamiento digital de las imágenes (la que realmente realiza las operaciones) e indicamos la librería a emplear:
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
Indicamos la imagen fuente a procesar, esta imagen a menos que se especifique otra configuración esta imagen referenciada en esta configuración es la que empleará CodeIgniter para efectuar los cambios:
$config['source_image'] = 'uploads/paysheet/image.jpg';
Luego indicamos que deseamos mantener el radio o proporción de la imagen:
$config['maintain_ratio'] = TRUE;
indicamos el ancho/largo de la imagen a reescalar:
$config['width'] = 100;
$config['height'] = 100;
Finalmente establecemos las configuraciones previamente realizadas y explicadas en el paso anterior y aplicamos el reescalado, la función devuelve un booleano que indica si fue exitoso o no la operación de reescalado:
$this->image_lib->clear();
$this->image_lib->initialize($config);
if (!$this->image_lib->resize()) {
echo $this->image_lib->display_errors();
}
Preservar la imagen fuente
Si no queremos que las modificaciones se realicen sobre la imagen original que es la referenciada en la configuración $config['source_image'] podemos descomentar la línea de código $config[new_image] que se encuentra comentada en el bloque anterior (y los posteriores a este) que nos permite crear una copia de la imagen original (para mantener la imagen original intacta) y realizar los cambios sobre esta nueva imagen, esto es muy útil si no queremos mantener la imagen original libre de cambios y otra imagen que se le apliquen el procesamiento digital de imágenes.
Recorte (crop) de las imágenes
Como podemos ver tiene partes similares al anterior salvo por algunas modificaciones que realizamos para cumplir con la tarea de recortar una imagen; definimos la posición 'X' y 'Y' en pixeles; además de esto es necesario reescalar la imagen en las mismas proporciones del trozo que deseamos recortar:
public function crop() {
$this->load->library('image_lib');
$size = getimagesize('uploads/paysheet/image.jpg');
var_dump($size);
$config['image_library'] = 'gd2';
$config['source_image'] = 'uploads/paysheet/image.jpg';
// $config['new_image'] = 'uploads/paysheet/new_image.jpg';
$config['x_axis'] = 300;
$config['y_axis'] = 60;
$config['width'] = 500 - 300;
$config['height'] = 500 - 60;
$config['new_image'] = 'uploads/paysheet/new_image.jpg';
$this->image_lib->initialize($config);
if (!$this->image_lib->crop()) {
echo $this->image_lib->display_errors();
}
}
En otras palabras, si vamos a recortar desde el punto 300 y 60 del plano cartesiano aplicado sobre nuestra imagen, y las dimensiones de nuestra imagen son de 500 pixeles tanto de altura como de anchura, entonces la imagen resultante debe tener una dimensión de (500-300) 200 x (500-60) 440 pixeles.
Rotación de las imágenes
Para rotar las imágenes podemos emplear alguno de los siguientes valores predefinidos:
- Rotación de 90 grados en contra las agujas del reloj.
- Rotación de 180 grados en contra las agujas del reloj.
- Rotación de 270 grados en contra las agujas del reloj.
- hor - voltea la imagen de manera horizontal.
- vrt - voltea la imagen de manera vertical.
public function rotate() {//90, 180, 270, vrt, hor
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = 'uploads/paysheet/image.jpg';
//$config['new_image'] = 'uploads/paysheet/new_image.jpg';
$config['rotation_angle'] = '90';
$config['new_image'] = 'uploads/paysheet/new_image.jpg';
$this->image_lib->clear();
$this->image_lib->initialize($config);
if (!$this->image_lib->rotate()) {
echo $this->image_lib->display_errors();
}
}
Marca de agua sobre nuestra imagen
Aquí vamos a agregar la marca de agua sobre una imagen fuente, como puede ver siguen manteniendo buena parte de las configuraciones realizadas anteriormente para indicar la fuente de la imagen, generar una copia de la imagen, librería etc.
También indicamos el texto que tendrá la marca de agua, se indica que es de tipo texto, la fuente de la marca de agua, el tamaño de letra, el color de la letra, la posición de la marca de agua en el eje vertical y horizontal, el espaciado o margen interno de la marca de agua respectivamente:
$config['wm_text'] = 'Copyright 2018 - Andrés Cruz';
$config['wm_type'] = 'text';
$config['wm_font_path'] = './system/fonts/texb.ttf';
$config['wm_font_size'] = '16';
$config['wm_font_color'] = 'ffffff';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'center';
$config['wm_padding'] = '2';
El código completo sería el siguiente:
public function watermark() {
$this->load->library('image_lib');
$config['image_library'] = 'NetPBM';
$config['source_image'] = 'uploads/paysheet/image.jpg';
$config['wm_text'] = 'Copyright 2006 - John Doe';
$config['wm_type'] = 'text';
$config['wm_font_path'] = './system/fonts/texb.ttf';
$config['wm_font_size'] = '16';
$config['wm_font_color'] = 'ffffff';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'center';
$config['wm_padding'] = '2';
$config['quality'] = '10';
$config['new_image'] = 'uploads/paysheet/new_image.jpg';
$this->image_lib->initialize($config);
if (!$this->image_lib->watermark()) {
echo $this->image_lib->display_errors();
}
}
Partes de estas configuraciones y otras que son de propósito general y que no influyen sobre el comportamiento de la función, como el caso de la preferencia quality (que hace un gran tamaño al momento de reducir el tamaño de las imágenes sacrificando un poco de calidad) pueden ser empleadas en distintos contextos de la tarea a realizar, entiéndase que podemos emplear (por ejemplo) la preferencia quality en las tareas que se encargan de reescalar, cortar y/o rotas las imágenes sin mayor problemas. Puedes consultar la documentación oficial en el siguiente enlace: CodeIgniter: Image Manipulation Class y ver el total de las preferencias que podemos emplear
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter