Cómo manipular imágenes con PHP e Intervention Image
Después de nuestra introducción a Intervention Image, una librería de PHP especialmente orientada a la manipulación de gráficos y que nos permite automatizar gran parte de las tareas que necesitamos en desarrollo web. En este tutorial, profundizamos en diferentes caso de uso que nos permite utilizarlo para, por ejemplo, enfocar las imágenes o crear miniaturas muy fácilmente.
Alternativa de creación de imágenes con métodos estáticos
Existen diferentes alternativas para formar imágenes. Para ello tan solo debemos emplear una clase diferente del namespace.
use Intervention\Image\ImageManagerStatic as Image; Image::configure(array('driver' => 'imagick')); $img = Image::make($_FILES['file']['tmp_name']);
El resto es exactamente igual.
Información de la imagen
Si queremos obtener el tamaño que tiene la imagen y su tamaño de alto x ancho, podemos utilizar diversos métodos:
$imagen = $intervention->make('images/img1.jpg'); $tamano = $imagen->filesize(); $anchura = $imagen->width(); $altura = $imagen->height(); echo 'Tamaño bytes: $tamano, ancho: $anchura, alto: $altura';
Aplicar efectos y filtros en las imágenes
Una de las cosas más interesantes que podemos hacer con Intervention Image sin necesidad de utilizar un programa externo, es la aplicación de diferentes efectos y filtros sobre las imágenes. Son cosas sencillas como realizar un enfoque, pasar la imagen a blanco y negro o cambiarle los brillos y contrastes.
Por ejemplo, si queremos realizar un enfoque sobre la imagen, después de crear su miniatura, podríamos hacerlo así:
$imagen->widen(350)->sharpen()->save('images/enfocada350.jpg');
El resultado de su antes y después sería tal y como podéis ver en la siguiente imagen:
Además de eso, nos permite crear nuestros filtros personalizados mediante secuencias que queremos incluir, que no son más que clases creadas por nosotros y que deben incluir la interface FilterInterface.
Subida de imágenes y creación de miniaturas en PHP
Con la librería Intervention Image por sí sola no podemos subir una imagen desde nuestro ordenador, por lo que tendremos que hacerlo desde las propias funcionalidades que nos brinda PHP.
En el ejemplo que os mostramos a continuación, veremos cómo haremos esto con un archivo uoload.php que se llama a sí mismo para subir al servidor la imagen que seleccionaremos en el formulario, para después poder manipularla.
<?php require 'vendor/autoload.php'; use Intervention\Image\ImageManager; ?> <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Upload de imagen con PHP y manipulación con Intervention Image</title> </head> <body> <?php if(!$_FILES) { ?> <form action='upload.php' method='post' enctype='multipart/form-data'> Imagen: <input type='file' name='imagen_formulario'> <input type='submit' value='Subir imagen'> </form> <?php } else { $intervention = new ImageManager(array('driver' => 'imagick')); $img = $intervention->make($_FILES['imagen_formulario']['tmp_name']); $img->fit(350, 150)->sharpen(15)->save('images/upload.jpg', 75); echo 'Imagen subida'; } ?> </body> </html>
Después de ver el código, tenemos que tener en cuenta algunas consideraciones:
- No hemos puesto ningún controlador para el archivo que vamos a subir. Es decir, no comprobamos si es o no un gráfico, ni le hemos puesto ninguna limitación de peso.
- Damos por hecho que es un gráfico en formato jpg.
- El nombre del fichero será upload.jpg, por lo que si queremos guardarlo con el nombre original tendríamos que hacerlo desde $_FILES[‘imagen_formulario’][‘name’])
Y, en cuanto a la librería, comentemos tres cosas:
- Con el método fit() podemos dimensionar el gráfico de manera proporcional. Indicamos el alto y ancho y realiza una mezcla entre redimensión y recorte (lienzo). Es ideal para dejar todas las imágenes al mismo tamaño.
- Con sharpen() aplicamos un enfoque a la imagen. El parámetro admite un valor entre 0 y 100, siendo 10 el predeterminado.
- Por último, con save() le indicamos la calidad con la que queremos guardar el archivo jpg. Cuanto menor sea su valor, menos ocupará el archivo, pero menor será también su calidad. Su valor por defecto es 90.