Redimensionando imágenes en tiempo de ejecución con Packer

Una necesidad muy común en proyectos con que disponen de frontal HTML es el escalado de imágenes para poder presentarlas de manera inteligente al usuario.

Hay muchas maneras de hacer esto, y las tres típicas son:

1. Escalando en backend a ciertas resoluciones cuando se sube la original.
2. Escalando en tiempo de ejecución mediante un servicio externo.
3. Escalando en tiempo de ejecución mediante un servicio local.

Aquí vamos a presentar el tercer caso, que nos permitirá escalar imágenes directamente desde las plantillas sin utilizar una url remota que procese el trabajo.

Para esta tarea usaremos como base la librería Packer en su funcionalidad de procesado de imágenes:

$> composer require eusonlito/laravel-packer

Añadimos la configuración necesasaria en config/app.php:

'providers' => [
    '...',
    'Eusonlito\LaravelPacker\PackerServiceProvider',
];

'aliases' => [
    '...',
    'Packer'    => 'Eusonlito\LaravelPacker\Facade',
];

Publicamos su config:

$> php artisan vendor:publish --provider="Eusonlito\LaravelPacker\PackerServiceProvider"

Y listo, ya podemos trabajar con la librería:

<img src="{{ Packer::img('/uploads/images/product.jpg', 'resizeCrop,150,150,center,middle') }}" class="thumbnail">

Este comando creará una imagen de 150x150 pixels con posición centro, medio y la guardará en el valor asignado para cache_folder que por defecto es /storage/cache/. Así en la siguiente ejecución buscará una imagen ya generada previamente con estos valores y en caso de existir la mostrará directamente.

Las transformaciones típicas con esta librería son:

• resizeCrop,width,height,x,y Realiza un recorte directo con las dimensiones y posición indicadas (por defecto, center y middle).
• resize,width,height,x,y Redimensiona las imagen con los máximos de width y height como referencia mateniendo la proporción. Se puede pasar un 0 a width o a height para que sólo tome el otro valor como referencia.
• rotate,angle Gira una imagen con los grados indicados.
• opacity,value Aplica opacidad a una imagen.

Puedes ver aquí los posibles casos de uso de Packer https://github.com/eusonlito/laravel-Packer#images

Las opciones completas para el parámetro de transformación las teneis en https://github.com/oscarotero/imagecow/#how-use-it

En un próximo post explicaré como crear un wrapper sobre esta librería que nos permita generar imágenes redimensionadas en base a la resolución del dispositivo del cliente y así evitar mostrar tamaños de escritorio en dispositivos móviles.

NOTA: Aunque en los ejemplos presentados se están realizando las redimensiones directamente en las plantillas, este paquete podría utilizarse de igual manera para redimensionar las imágenes que se devuelven a través de un API JSON.

NOTA 2: Aunque los ejemplos aquí publicados son bajo Laravel, esta librería es independiente al framework y puedes utilizarla directamente tal y como se explica aquí https://github.com/eusonlito/laravel-Packer#using-packer-outside-laravel