Convirtiendo imágenes a JPEG usando Node.js y Apidog

Estás creando una aplicación web y necesitas permitir que los usuarios suban imágenes. Pero hay una trampa: necesitas que todas las imágenes estén en formato JPEG por motivos de consistencia y rendimiento. ¿Cómo puedes convertir las imágenes subidas por los usuarios a JPEG sobre la marcha?

En este tutorial, exploraremos cómo configurar un servidor backend utilizando Node.js y Express.js para convertir imágenes a formato JPEG. Utilizaremos la potente biblioteca Sharp para el procesamiento de imágenes y demostraremos cómo manejar las solicitudes de conversión de imágenes desde un cliente front-end o una herramienta de gestión de API como Apidog.

Requisitos previos:

Antes de empezar, asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu sistema. Puedes descargarlos e instalarlos desde el sitio web oficial de Node.js.

Configuración del Backend;

Empecemos creando una nueva carpeta para nuestro proyecto e inicializando npm.

mkdir image-conversion-backend
cd image-conversion-backend
npm init -y

A continuación, instala las dependencias necesarias: Express, Cors, Multer y Sharp.

npm install express cors multer sharp

Con las dependencias instaladas, vamos a crear un archivo index.js donde definiremos nuestro servidor Express.

const cors = require("cors");
const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();
const port = process.env.PORT || 8080;

// Configure Multer to handle file uploads
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// Enable Cross-Origin Resource Sharing (CORS)
app.use(cors());

// Parse JSON bodies
app.use(express.json());

// Define route for image conversion
app.post('/convert', upload.single('image'), async (req, res) => {
    try {
        // Use Sharp to convert the uploaded image to JPEG format
        const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();

        // Send the converted image as the response
        res.send(buffer);
    } catch (error) {
        console.error('Conversion error:', error);
        res.status(500).send('Conversion failed');
    }
});

// Start the server
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

Entendiendo el Código;

Analicemos los componentes clave de nuestra aplicación backend:

• Inicialización de Express: Inicializamos una aplicación Express y definimos el número de puerto para nuestro servidor.
• Configuración de Multer: Multer está configurado para manejar las cargas de archivos. En nuestro caso, estamos utilizando memoryStorage() para almacenar el archivo cargado en la memoria.
• Middleware CORS: Se habilita el Intercambio de Recursos de Origen Cruzado (CORS) para permitir las solicitudes de un cliente front-end que se ejecuta en http://localhost:3000.
• Ruta de Conversión de Imágenes: Definimos una ruta POST /convert donde se realiza la conversión de la imagen. El middleware Multer maneja la carga del archivo, y la biblioteca Sharp se utiliza para convertir la imagen a formato JPEG.
• Manejo de Errores: Envolvemos la lógica de conversión en un bloque try-catch para manejar cualquier error que pueda ocurrir durante el proceso de conversión.
• Inicio del Servidor: Finalmente, iniciamos el servidor Express, que escucha en el puerto especificado.

Ejecutando el Servidor Backend

Para ejecutar el servidor backend, navega al directorio de tu proyecto en la terminal y ejecuta el siguiente comando:

node index.js

Tu servidor backend ya está en funcionamiento, listo para manejar las solicitudes de conversión de imágenes.

Ahora, puedes utilizar una herramienta frontend como react, vue.js o incluso el método Fetch de js vainilla para enviar una solicitud desde el frontend al servidor para probar las cosas. Eso debería funcionar. Sin embargo, en esta guía, como mencioné antes, utilizaremos Apidog.

Empezando con Apidog

Para aquellos de nosotros que no sabemos qué es Apidog, Apidog es una plataforma de colaboración integrada para la documentación de API, la depuración de API, la simulación de API y las pruebas automatizadas de API. Para aquellos de nosotros que hemos oído hablar de Postman o lo hemos utilizado antes, Apidog ofrece mucho más que Postman, lo que la convierte en la herramienta de gestión de API ideal para probar tus API.

Puedes utilizar el enlace anterior para descargar o crear una cuenta para empezar. Una vez creada tu cuenta, el siguiente paso es enviar una solicitud POST a tu servidor backend ya en ejecución para convertir las imágenes a jpeg.

Cuando creas una cuenta en Apidog, se crea automáticamente un nuevo equipo/espacio de trabajo para ti. Puedes crear proyectos o continuar con el predeterminado generado para ti. En este ejemplo, utilizaré el proyecto ya creado y crearé una nueva solicitud para probar nuestro código backend.

Cuando haces clic en ese botón de solicitud, se te mostrará una interfaz para enviar tu primera solicitud.

Lo primero que hay que hacer es cambiar el tipo de solicitud de GET a POST. Actualiza la URL con la URL del servidor local - localhost:8080 en mi caso.

A continuación, haz clic en la sección "Body" y selecciona datos de formulario. Al seleccionar datos de formulario, podrás seleccionar y subir imágenes directamente a Apidog para probar la conversión. Ahora dale a los datos del formulario un nombre "Image", escribe "file" y sube la imagen para convertirla.

Una vez hecho esto, haz clic en el botón Enviar en la parte superior derecha para enviar la solicitud. Si todo va bien, deberías poder ver una respuesta 200 y el archivo para descargar.

Es importante tener en cuenta que cuando descargues el archivo, verás un archivo response.bin. Cuando veas la propiedad, descubrirás que es un archivo .jpg. Y esa es tu imagen convertida.

Conclusión

Acabamos de ver cómo convertir imágenes de .png o cualquier otro formato a .jpeg utilizando node.js y luego probar las cosas con Apidog.

Apidog nos dio la capacidad y la flexibilidad de probar la API sin depender de ninguna herramienta o framework frontend.