Procesamiento de imágenes en Node.js: resize y crop con Sharp

Trabajo con imágenes en Node.js: resize y crop con Sharp

\n\n

En el desarrollo web moderno, el procesamiento de imágenes en el lado del servidor es una tarea frecuente. Node.js ofrece varias librerías potentes para trabajar con gráficos. En este artículo, analizaremos en detalle la librería Sharp, una herramienta rápida y eficiente para cambiar el tamaño (resize) y recortar (crop) imágenes.

\n\n

¿Por qué Sharp?

\n\n

Sharp utiliza las librerías nativas libvips, lo que lo convierte en una de las soluciones más eficientes para Node.js. Principales ventajas:

\n

\n
• Alta velocidad de procesamiento (mucho más rápido que alternativas en JavaScript puro)
\n
• Bajo consumo de memoria
\n
• Soporte para todos los formatos populares: JPEG, PNG, WebP, AVIF, TIFF
• API simple y clara
• Posibilidad de trabajar con flujos (streams)

\n\n

Instalación

\n\n

La instalación de Sharp en un proyecto Node.js se realiza con un solo comando:

\n\n

npm install sharp

\n\n

Después de la instalación, la librería está lista para usar. Asegúrese de que el sistema tenga las dependencias necesarias para compilar el módulo nativo (generalmente ocurre automáticamente).

\n\n

Cambio básico de tamaño (resize)

\n\n

El método resize() permite cambiar las dimensiones de una imagen. Veamos los casos de uso principales.

\n\n

Ejemplo 1: Cambio de tamaño simple

\n\n

const sharp = require('sharp');\nconst path = require('path');\n\nasync function resizeImage() {\n    try {\n        await sharp('input.jpg')\n            .resize(300, 200) // ancho 300px, alto 200px\n            .toFile('output.jpg');\n        console.log('Imagen redimensionada exitosamente');\n    } catch (error) {\n        console.error('Error:', error);\n    }\n}\n\nresizeImage();

\n\n

En este ejemplo, la imagen se comprimirá a las dimensiones exactas de 300x200 píxeles, lo que puede distorsionar las proporciones.

\n\n

Ejemplo 2: Mantener las proporciones

\n\n

async function resizeWithProportions() {\n    await sharp('input.jpg')\n        .resize({\n            width: 400, // solo el ancho\n            height: undefined, // la altura se calculará automáticamente\n            fit: 'inside' // mantener las proporciones\n        })\n        .toFile('output_inside.jpg');\n    \n    console.log('Proporciones mantenidas');\n}

\n\n

El parámetro fit acepta varios valores:

\n

\n
• cover — recorta la imagen para llenar completamente las dimensiones dadas (por defecto)
\n
• contain — ajusta la imagen dentro de las dimensiones dadas, manteniendo las proporciones
\n
• fill — estira la imagen a las dimensiones dadas
\n
• inside — reduce la imagen para que quepa dentro de las dimensiones dadas
\n
• outside — amplía la imagen para que exceda las dimensiones dadas
\n

\n\n

Recorte de imágenes (crop)

\n\n

Sharp ofrece dos formas principales de recortar: mediante el método extract() y a través de los parámetros de resize().

\n\n

Método extract()

\n\n

Permite extraer un área rectangular de la imagen según las coordenadas dadas:

\n\n

async function cropImage() {\n    await sharp('input.jpg')\n        .extract({\n            left: 100,   // margen izquierdo\n            top: 50,     // margen superior\n            width: 300,  // ancho del área\n            height: 200  // alto del área\n        })\n        .toFile('cropped.jpg');\n    \n    console.log('Recorte realizado');\n}

\n\n

Recorte automático al redimensionar

\n\n

A menudo es necesario cambiar el tamaño y recortar la imagen simultáneamente. Esto se hace con el parámetro gravity o position:

\n\n

async function cropAndResize() {\n    await sharp('input.jpg')\n        .resize(200, 200, {\n            fit: 'cover', // recortar hasta exactamente