Vous créez une application web et vous devez permettre aux utilisateurs de télécharger des images. Mais il y a un hic : vous avez besoin que toutes les images soient au format JPEG pour des raisons de cohérence et de performance. Comment pouvez-vous convertir les images téléchargées par les utilisateurs en JPEG à la volée ?
Dans ce tutoriel, nous allons explorer comment configurer un serveur backend en utilisant Node.js et Express.js pour convertir des images au format JPEG. Nous utiliserons la puissante bibliothèque Sharp pour le traitement d'images et démontrerons comment gérer les requêtes de conversion d'images à partir d'un client front-end ou d'un outil de gestion d'API tel que Apidog.
Prérequis :
Avant de commencer, assurez-vous d'avoir Node.js et npm (Node Package Manager) installés sur votre système. Vous pouvez les télécharger et les installer à partir du site officiel de Node.js.
Configuration du backend ;
Commençons par créer un nouveau dossier pour notre projet et initialiser npm.
mkdir image-conversion-backend
cd image-conversion-backend
npm init -y
Ensuite, installez les dépendances nécessaires : Express, Cors, Multer et Sharp.
npm install express cors multer sharp
Avec les dépendances installées, créons un fichier index.js où nous définirons notre serveur 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}`);
});
Comprendre le code ;
Décomposons les principaux composants de notre application backend :
- Initialisation d'Express : Nous initialisons une application Express et définissons le numéro de port pour notre serveur.
- Configuration de Multer : Multer est configuré pour gérer les téléchargements de fichiers. Dans notre cas, nous utilisons
memoryStorage()pour stocker le fichier téléchargé en mémoire. - Middleware CORS : Le partage de ressources entre origines (CORS) est activé pour autoriser les requêtes d'un client front-end fonctionnant sur
http://localhost:3000. - Route de conversion d'image : Nous définissons une route POST
/convertoù la conversion d'image a lieu. Le middleware Multer gère le téléchargement du fichier, et la bibliothèque Sharp est utilisée pour convertir l'image au format JPEG. - Gestion des erreurs : Nous enveloppons la logique de conversion dans un bloc try-catch pour gérer les erreurs qui peuvent survenir pendant le processus de conversion.
- Démarrage du serveur : Enfin, nous démarrons le serveur Express, qui écoute sur le port spécifié.
Exécution du serveur backend
Pour exécuter le serveur backend, accédez à votre répertoire de projet dans le terminal et exécutez la commande suivante :
node index.js
Votre serveur backend est maintenant opérationnel et prêt à gérer les requêtes de conversion d'images.
Maintenant, vous pouvez utiliser un outil frontend comme react, vue.js ou même la méthode Fetch de vanilla js pour envoyer une requête du frontend au serveur afin de tester les choses. Cela devrait fonctionner. Dans ce guide, cependant, comme je l'ai mentionné précédemment, nous utiliserons Apidog.
Démarrer avec Apidog
Pour ceux d'entre nous qui ne savent pas ce qu'est Apidog, Apidog est une plateforme de collaboration intégrée pour la documentation API, le débogage API, la simulation API et les tests automatisés API. Pour ceux d'entre nous qui ont entendu parler de Postman ou qui l'ont utilisé auparavant, Apidog offre bien plus que Postman, ce qui en fait l'outil idéal de gestion d'API pour tester vos API.
Vous pouvez utiliser le lien ci-dessus pour télécharger, ou créer un compte pour commencer. Une fois votre compte créé, l'étape suivante consiste à envoyer une requête POST à votre serveur backend déjà en cours d'exécution pour convertir les images en jpeg.
Lorsque vous créez un compte sur Apidog, une nouvelle équipe/espace de travail est automatiquement créé pour vous. Vous pouvez créer des projets ou continuer avec celui par défaut généré pour vous. Dans cet exemple, j'utiliserai le projet déjà créé et créerai une nouvelle requête pour tester notre code backend.
Lorsque vous cliquez sur ce bouton de requête, une interface s'affiche pour envoyer votre première requête.
La première chose à faire est de changer le type de requête de GET à POST. Mettez à jour l'URL avec l'URL du serveur local - localhost:8080 dans mon cas.
Ensuite, cliquez sur la section "Body" et sélectionnez les données du formulaire. En sélectionnant les données du formulaire, vous pourrez sélectionner et télécharger des images directement sur Apidog pour tester la conversion. Maintenant, donnez aux données du formulaire un nom "Image", tapez "file", et téléchargez l'image à convertir.
Une fois cela fait, cliquez sur le bouton Envoyer en haut à droite pour envoyer la requête. Si tout se passe bien, vous devriez pouvoir voir une réponse 200 et le fichier à télécharger.
Il est important de noter que lorsque vous téléchargez le fichier, vous verrez une réponse.bin. Lorsque vous affichez la propriété, vous découvrirez qu'il s'agit d'un fichier .jpg. Et c'est votre image convertie.
Conclusion
Nous venons de voir comment convertir des images de .png ou de tout autre format en .jpeg en utilisant node.js, puis en testant les choses avec Apidog.
Apidog nous a donné la possibilité et la flexibilité de tester l'API sans nous appuyer sur un outil ou un framework frontend.
