Carga, procesamiento y cambio de tamaño de imágenes de Node.js con el paquete Sharp

A menudo, en nuestras aplicaciones web, necesitamos almacenar múltiples formas y formatos de imágenes, en forma de una imagen de perfil o una imagen para un producto en un prototipo de comercio electrónico. En la mayoría de nuestros casos, necesitamos almacenar imágenes comprimidas en varios tamaños, conservando la calidad. Por ejemplo, para un producto en un sitio de comercio electrónico, necesitaríamos almacenar 3 versiones de una imagen de producto:

• Miniatura
• Baja resolución para vistas previas, etc.
• La alta resolución original para el producto real.

requisitos previos:

• Conceptos básicos de Node.js
• Manejo de rutas en express.js

Módulos utilizados: sharp , Multer

De acuerdo con la documentación oficial de npm, el caso de uso típico para sharp es convertir imágenes grandes en formatos comunes a imágenes JPEG, PNG y WebP más pequeñas y compatibles con la web de diferentes dimensiones.

Inicialice npm en un directorio vacío para comenzar con el siguiente comando:

npm init -y

Instale los módulos necesarios con el siguiente comando:

npm install express --save
npm install body-parser --save
npm install sharp --save
npm install multer --save

Configuración de Multer:
Para cargar archivos, necesitamos configurar Multer como un middleware para pasar. Para configurar multer, necesitamos agregar el siguiente código a nuestra aplicación.

Nota: Para uso adicional y saber más sobre cargas y multer, puede consultar la documentación oficial en Multer

// Importing the module
const multer = require('multer');  
  
// Setting up a middleware specifying the
// destination for storing the images
const upload = multer({dest : './images'})   

Dado que multer funciona con datos de formulario, debe asegurarse de que la carga se realice a través de un formulario con configuración como multipart/form-data.

Nombre de archivo: app.js

// Importing the required modules
var express = require('express');
var bodyparser = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var sharp = require('sharp');
  
var upload = multer({dest : './images'}) 
  
// Initialize the express object
var app = express();     
  
// Use body-parser to parse incoming data
app.use(bodyparser.urlencoded({extended : true}))     
  
// Use the upload middleware containing 
// our file configuration, with the name
// of input file attribute as "avatar"
// to the desired configuration.
  
app.post('/upload', upload.single("avatar"), (req, res)=>
{
    fs.rename(req.file.path, './images/avatar.jpg', (err)=>{
        console.log(err);
    })
  
    return res.json("File Uploaded Successfully!");
});
  
app.listen(3000, ()=>{
    console.log("Server Running!")
})

Pasos para ejecutar el código anterior:

1. Ejecute el archivo app.js con el siguiente comando:

   node app.js

   Después de ejecutar el comando anterior, verá el siguiente resultado:

   Server Running!

2. Envíe una solicitud POST a https://localhost:3000/upload usando Postman. Debe pasar «avatar» como CLAVE y la imagen como VALOR.
3. Después de presionar la solicitud, se creará un directorio de imágenes con nuestra imagen deseada.

Procesamiento de imágenes con Sharp: Procesaremos imágenes a través de un paquete Sharp. Para crear múltiples instancias con diferentes propiedades, usamos el siguiente código:

// Configuring thumbnail image
sharp(__dirname + '/images/avatar.jpg').resize(200,200)
.jpeg({quality : 50}).toFile(__dirname 
        + '/images/avatar_thumb.jpg');
  
// Configuring Preview Image
sharp(__dirname + '/images/avatar.jpg').resize(640,480)
.jpeg({quality : 80}).toFile(__dirname 
        + '/images/avatar_preview.jpg');

Entonces, todo está configurado, la aplicación final.js será la siguiente:
Nombre de archivo: aplicación.js

var express = require('express');
var bodyparser = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var sharp = require('sharp');
  
var upload = multer({dest : './images'}) 
  
var app = express();   
  
app.use(bodyparser.urlencoded({extended : true}))  
  
app.post('/upload', upload.single("avatar"), (req, res)=>
{
    fs.rename(req.file.path, './images/avatar.jpg', (err)=>{
        console.log(err);
    })
  
    sharp(__dirname + '/images/avatar.jpg').resize(200,200)
    .jpeg({quality : 50}).toFile(__dirname 
        + '/images/avatar_thumb.jpg');
  
  
    sharp(__dirname + '/images/avatar.jpg').resize(640,480)
    .jpeg({quality : 80}).toFile(__dirname 
        + '/images/avatar_preview.jpg');
  
    return res.json("File Uploaded Successfully!");
});
  
app.listen(3000, ()=>{
    console.log("Server Running!")
})

Al ejecutar el servidor y enviar la misma solicitud que antes, obtendrá todas las imágenes cargadas en el directorio de imágenes con la configuración deseada, como se muestra a continuación:

Opciones adicionales de Sharp: https://sharp.pixelplumbing.com/