Node.js est un langage de programmation JavaScript populaire, extrêmement flexible et pratique, qui peut être utilisé pour développer différents types d'applications sur le backend. L'une de ces applications universelles est une galerie de photos et un éditeur d'images en ligne. Dans ce cas, le redimensionnement ou la mise à l'échelle dynamique des images est une tâche très courante. Dans cet article, nous explorerons comment utiliser Node.js pour redimensionner les images afin de mieux répondre aux besoins de nos applications.
Avant de commencer, nous devons installer certaines bibliothèques nécessaires via npm. Nous pouvons entrer dans le répertoire racine du projet depuis le terminal et exécuter la commande suivante :
$ npm install sharp
sharp est un module Node.js efficace qui nous permet de traiter facilement des images, telles que le recadrage, la rotation, la mise à l'échelle et d'autres opérations.
Ensuite, nous écrirons du code pour implémenter la fonction de zoom d'image. Jetons un coup d'œil à ce programme simple mais puissant :
const fs = require('fs'); const sharp = require('sharp'); sharp('input.jpg') .resize(200, 200) .toFile('output.jpg', (err, info) => { if (err) console.log(err); console.log(info); });
Ici, nous chargeons d'abord le fichier que nous voulons redimensionner (input.jpg) à l'aide du module fs. Nous utilisons ensuite la méthode resize() du module Sharp pour spécifier la nouvelle taille de l'image (ici nous modifions la taille de l'image à 200x200). Enfin, nous enregistrons le fichier de sortie dans output.jpg.
Lorsque nous exécutons ce programme, certaines informations seront imprimées dans la sortie du terminal, qui sont les suivantes :
{ format: 'jpeg', width: 200, height: 200, channels: 3, premultiplied: false, size: 4370 }
Ici, nous pouvons voir diverses propriétés de l'image de sortie, telles que le format, la largeur, la hauteur, etc.
Dans les applications réelles, il peut être nécessaire de redimensionner les images par lots. Grâce à Node.js, nous pouvons traiter un grand nombre d'images en un minimum de temps. Voici un exemple pour redimensionner et redimensionner des images par lots :
const fs = require('fs'); const sharp = require('sharp'); const inputFolder = './input/'; const outputFolder = './output/'; const imageSize = 400; fs.readdir(inputFolder, (err, files) => { if (err) console.log(err); files.forEach(file => { sharp(inputFolder + file) .resize(imageSize, imageSize) .toFile(outputFolder + 'resized_' + file, (err, info) => { if (err) console.log(err); console.log(info); }); }); });
Ici, nous spécifions d'abord le dossier que nous voulons redimensionner et le nouveau dossier. Nous lisons ensuite tous les fichiers de ce répertoire et les hébergeons dans un tableau de fichiers. Ensuite, nous instancions un objet pointu pour chaque fichier et appelons la méthode resize() pour spécifier la nouvelle taille de l'image. Enfin, nous enregistrons le fichier de sortie dans un nouveau répertoire et imprimons la sortie sur le terminal.
Dans les applications Web, le redimensionnement dynamique des images peut contribuer à améliorer la vitesse et les performances de l'application. Si votre application nécessite le chargement fréquent d'un grand nombre d'images dans un navigateur Web, il est utile de redimensionner et de redimensionner les images pour les adapter à votre mise en page et à votre style. Cela permet de transférer uniquement les images dont vous avez besoin depuis le serveur à la demande, plutôt que de télécharger des images plus volumineuses. Dans ce cas, l'écriture d'applications à l'aide de Node.js peut vous aider à offrir une expérience utilisateur de haute qualité tout en préservant de bonnes performances des pages Web.
Conclusion
Dans cet article, nous avons examiné en profondeur comment redimensionner rapidement et facilement des images à l'aide de Node.js. En utilisant la populaire bibliothèque Sharp, nous pouvons facilement redimensionner les images en un minimum de temps et augmenter la vitesse et les performances de nos applications Web. Vous pouvez désormais facilement utiliser ces technologies dans vos applications pour une meilleure expérience utilisateur et de meilleures performances applicatives.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!