Convertendo Imagens para JPEG usando Node.js e Apidog

Você está construindo uma aplicação web e precisa permitir que os usuários enviem imagens. Mas há uma condição: você precisa que todas as imagens estejam no formato JPEG por motivos de consistência e desempenho. Como você pode converter as imagens enviadas pelos usuários para JPEG em tempo real?

Neste tutorial, vamos explorar como configurar um servidor backend usando Node.js e Express.js para converter imagens para o formato JPEG. Vamos utilizar a poderosa biblioteca Sharp para processamento de imagens e demonstrar como lidar com solicitações de conversão de imagens de um cliente front-end ou ferramenta de gerenciamento de API, como Apidog.

Pré-requisitos:

Antes de começar, certifique-se de ter o Node.js e o npm (Node Package Manager) instalados em seu sistema. Você pode baixá-los e instalá-los no site oficial do Node.js.

Configuração do Backend;

Vamos começar criando uma nova pasta para o nosso projeto e inicializando o npm.

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

Em seguida, instale as dependências necessárias: Express, Cors, Multer e Sharp.

npm install express cors multer sharp

Com as dependências instaladas, vamos criar um index.js onde definiremos nosso 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;

// Configurar Multer para lidar com uploads de arquivos
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// Habilitar o Compartilhamento de Recursos de Origem Cruzada (CORS)
app.use(cors());

// Analisar corpos JSON
app.use(express.json());

// Definir rota para conversão de imagem
app.post('/convert', upload.single('image'), async (req, res) => {
    try {
        // Usar Sharp para converter a imagem enviada para o formato JPEG
        const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();

        // Enviar a imagem convertida como resposta
        res.send(buffer);
    } catch (error) {
        console.error('Erro de conversão:', error);
        res.status(500).send('A conversão falhou');
    }
});

// Iniciar o servidor
app.listen(port, () => {
    console.log(`Servidor está rodando na porta ${port}`);
});

Entendendo o Código;

Vamos analisar os principais componentes da nossa aplicação backend:

• Inicialização do Express: Inicializamos uma aplicação Express e definimos o número da porta para nosso servidor.
• Configuração do Multer: O Multer é configurado para lidar com uploads de arquivos. No nosso caso, estamos usando memoryStorage() para armazenar o arquivo enviado na memória.
• Middleware CORS: O Compartilhamento de Recursos de Origem Cruzada (CORS) é habilitado para permitir solicitações de um cliente front-end rodando em http://localhost:3000.
• Rota de Conversão de Imagem: Definimos uma rota POST /convert onde a conversão da imagem acontece. O middleware Multer lida com o upload do arquivo, e a biblioteca Sharp é usada para converter a imagem para o formato JPEG.
• Tratamento de Erros: Envolvemos a lógica de conversão em um bloco try-catch para lidar com quaisquer erros que possam ocorrer durante o processo de conversão.
• Início do Servidor: Por fim, iniciamos o servidor Express, que escuta a porta especificada.

Executando o Servidor Backend

Para executar o servidor backend, navegue até o diretório do seu projeto no terminal e execute o seguinte comando:

node index.js

Seu servidor backend agora está ativo e pronto para lidar com solicitações de conversão de imagens.

Agora, você pode usar uma ferramenta front-end como react, vue.js ou até mesmo o método Fetch do vanilla js para enviar uma solicitação do front-end para o servidor e testar as coisas. Isso deve funcionar. Neste guia, no entanto, como mencionei antes, usaremos o Apidog.

Começando com Apidog

Para aqueles que não sabem o que é Apidog, Apidog é uma plataforma de colaboração integrada para documentação de API, depuração de API, simulação de API e teste automatizado de API. Para aqueles que já ouviram falar ou usaram o Postman antes, o Apidog oferece muito mais do que o Postman, tornando-se a ferramenta ideal de gerenciamento de API para testar suas APIs.

Você pode usar o link acima para baixar ou criar uma conta para começar. Depois que sua conta foi criada, o próximo passo é enviar uma solicitação POST para o seu servidor backend já em funcionamento para converter as imagens para jpeg.

Quando você cria uma conta no Apidog, um novo time/espaco de trabalho é automaticamente criado para você. Você pode criar projetos ou continuar com o projeto padrão gerado para você. Neste exemplo, vou usar o projeto já criado e criar uma nova solicitação para testar nosso código de backend.

Quando você clicar no botão de solicitação, você verá uma interface para enviar sua primeira solicitação.

A primeira coisa a fazer é mudar o tipo de solicitação de GET para POST. Atualize a URL com a URL do servidor local - localhost:8080 no meu caso.

Em seguida, clique na seção "Corpo" e selecione dados do formulário. Ao selecionar dados do formulário, você poderá selecionar e enviar imagens diretamente para o Apidog para testar a conversão. Agora, dê ao dado do formulário o nome "Imagem", tipo "arquivo" e faça o upload da imagem para converter.

Uma vez feito isso, clique no botão Enviar no canto superior direito para enviar a solicitação. Se tudo correr bem, você deve ver uma resposta 200 e o arquivo para baixar.

É importante notar que, quando você baixar o arquivo, verá um arquivo response.bin. Ao visualizar a propriedade, você descobrirá que é um arquivo .jpg. E essa é a sua imagem convertida.

Conclusão

Acabamos de ver como converter imagens de .png ou qualquer outro formato para .jpeg usando node.js e, em seguida, testando as coisas com Apidog.

O Apidog nos deu a capacidade e flexibilidade de testar a API sem depender de qualquer ferramenta ou framework front-end.