Comment traiter les images en Node.js avec Sharp

L’auteur a sélectionné le Fonds pour la Diversité dans la Technologie pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

Le traitement d’images numériques est une méthode utilisant un ordinateur pour analyser et manipuler des images. Le processus implique la lecture d’une image, l’application de méthodes pour altérer ou améliorer l’image, puis la sauvegarde de l’image traitée. Il est courant pour les applications qui traitent du contenu téléchargé par l’utilisateur de traiter des images. Par exemple, si vous développez une application web permettant aux utilisateurs de télécharger des images, ces derniers peuvent télécharger des images inutilement grandes. Cela peut avoir un impact négatif sur la vitesse de chargement de l’application et gaspiller l’espace serveur. Avec le traitement d’images, votre application peut redimensionner et compresser toutes les images téléchargées par les utilisateurs, ce qui peut considérablement améliorer les performances de votre application et économiser l’espace disque de votre serveur.

Node.js dispose d’un écosystème de bibliothèques que vous pouvez utiliser pour traiter des images, telles que sharp, jimp et le module gm. Cet article se concentrera sur le module sharp. sharp est une bibliothèque populaire de traitement d’images pour Node.js qui prend en charge divers formats de fichiers image, tels que JPEG, PNG, GIF, WebP, AVIF, SVG et TIFF.

Dans ce tutoriel, vous utiliserez sharp pour lire une image et extraire ses métadonnées, redimensionner, changer un format d’image et compresser une image. Ensuite, vous recadrerez, mettrez en niveaux de gris, ferez pivoter et flouterez une image. Enfin, vous composerez des images et ajouterez du texte sur une image. À la fin de ce tutoriel, vous aurez une bonne compréhension de la manière de traiter les images en Node.js.

Prérequis

Pour terminer ce tutoriel, vous aurez besoin de:

• Mise en place de Node.js dans votre environnement de développement local. Vous pouvez suivre Comment installer Node.js et créer un environnement de développement local pour apprendre comment installer Node.js et npm sur votre système.

• Connaissance de base de l’écriture et de l’exécution d’un programme Node.js. Vous pouvez suivre Comment écrire et exécuter votre premier programme en Node.js pour apprendre les bases.

• Compréhension de base de la programmation asynchrone en JavaScript. Suivez Comprendre la boucle d’événement, les rappels, les promesses et async/await en JavaScript pour revoir la programmation asynchrone.

Étape 1 — Mise en place du répertoire du projet et téléchargement des images

Avant de commencer à écrire votre code, vous devez créer le répertoire qui contiendra le code et les images que vous utiliserez dans cet article.

Ouvrez votre terminal et créez le répertoire pour le projet en utilisant la commande mkdir:

mkdir process_images

Déplacez-vous dans le répertoire nouvellement créé en utilisant la commande cd:

cd process_images

Créez un fichier package.json en utilisant la commande npm init pour suivre les dépendances du projet:

npm init -y

L’option -y indique à npm de créer le fichier package.json par défaut.

Ensuite, installez sharp en tant que dépendance:

npm install sharp

Vous utiliserez les trois images suivantes dans ce tutoriel:

Ensuite, téléchargez les images dans le répertoire de votre projet en utilisant la commande curl.

Utilisez la commande suivante pour télécharger la première image. Cela téléchargera l’image sous le nom sammy.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy.png

Ensuite, téléchargez la deuxième image avec la commande suivante. Cela téléchargera l’image sous le nom underwater.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/underwater.png

Enfin, téléchargez la troisième image en utilisant la commande suivante. Cela téléchargera l’image sous le nom sammy-transparent.png:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy-transparent.png

Avec le répertoire du projet et les dépendances configurées, vous êtes maintenant prêt à commencer le traitement des images.

Étape 2 — Lecture des images et extraction des métadonnées

Dans cette section, vous écrirez du code pour lire une image et extraire ses métadonnées. Les métadonnées de l’image sont du texte intégré dans une image, qui comprend des informations sur l’image telles que son type, sa largeur et sa hauteur.

Pour extraire les métadonnées, vous allez d’abord importer le module sharp, créer une instance de sharp, et passer le chemin de l’image comme argument. Ensuite, vous enchaînerez la méthode metadata() à l’instance pour extraire les métadonnées et les afficher dans la console.

Pour ce faire, créez et ouvrez le fichier readImage.js dans votre éditeur de texte préféré. Ce tutoriel utilise un éditeur de texte en ligne de commande appelé nano:

nano readImage.js

Ensuite, requérez sharp en haut du fichier :

const sharp = require("sharp");

Sharp est un module de traitement d’image basé sur les promesses. Lorsque vous créez une instance de sharp, cela renvoie une promesse. Vous pouvez résoudre la promesse en utilisant la méthode then ou utiliser async/await, qui offre une syntaxe plus propre.

Pour utiliser la syntaxe async/await, vous devez créer une fonction asynchrone en plaçant le mot-clé async au début de la fonction. Cela vous permettra d’utiliser le mot-clé await à l’intérieur de la fonction pour résoudre la promesse renvoyée lorsque vous lisez une image.

Dans votre fichier readImage.js, définissez une fonction asynchrone, getMetadata(), pour lire l’image, extraire ses métadonnées et les afficher dans la console :

const sharp = require("sharp");

async function getMetadata() {
  const metadata = await sharp("sammy.png").metadata();
  console.log(metadata);
}

La fonction getMetadata() est une fonction asynchrone étant donné le mot-clé async que vous avez défini avant l’étiquette function. Cela vous permet d’utiliser la syntaxe await à l’intérieur de la fonction. La fonction getMetadata() lira une image et renverra un objet avec ses métadonnées.

À l’intérieur du corps de la fonction, vous lisez l’image en appelant sharp(), qui prend le chemin de l’image comme argument, ici avec sammy.png.

En plus de prendre un chemin d’image, sharp() peut également lire les données d’image stockées dans un Buffer, Uint8Array ou Uint8ClampedArray à condition que l’image soit en JPEG, PNG, GIF, WebP, AVIF, SVG ou TIFF.

Maintenant, lorsque vous utilisez sharp() pour lire l’image, cela crée une instance sharp. Vous enchaînez ensuite la méthode metadata() du module sharp à l’instance. La méthode renvoie un objet contenant les métadonnées de l’image, que vous stockez dans la variable metadata et que vous affichez son contenu à l’aide de console.log().

Votre programme peut maintenant lire une image et renvoyer ses métadonnées. Cependant, si le programme génère une erreur pendant l’exécution, il s’arrêtera. Pour contourner cela, vous devez capturer les erreurs lorsqu’elles se produisent.

Pour faire cela, enveloppez le code à l’intérieur de la fonction getMetadata() dans un bloc try...catch :

const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

À l’intérieur du bloc try, vous lisez une image, extrayez et enregistrez ses métadonnées. En cas d’erreur pendant ce processus, l’exécution passe à la section catch et enregistre l’erreur pour éviter que le programme ne plante.

Enfin, appelez la fonction getMetadata() en ajoutant la ligne en surbrillance :

const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

getMetadata();

Maintenant, enregistrez et quittez le fichier. Entrez y pour sauvegarder les modifications apportées au fichier, et confirmez le nom du fichier en appuyant sur la touche ENTER ou RETURN.

Exécutez le fichier en utilisant la commande node :

node readImage.js

Vous devriez voir une sortie similaire à ceci :

Output
{
  format: 'png',
  width: 750,
  height: 483,
  space: 'srgb',
  channels: 3,
  depth: 'uchar',
  density: 72,
  isProgressive: false,
  hasProfile: false,
  hasAlpha: false
}

Maintenant que vous avez lu une image et extrait ses métadonnées, vous allez maintenant redimensionner une image, changer son format et la compresser.

Étape 3 — Redimensionner, Changer le format de l’image et Compresser les images

Le redimensionnement est le processus de modification des dimensions d’une image sans en couper quoi que ce soit, ce qui affecte la taille du fichier image. Dans cette section, vous allez redimensionner une image, changer son type d’image et compresser l’image. La compression d’image est le processus de réduction de la taille d’un fichier image sans perte de qualité.

Tout d’abord, vous enchaînerez la méthode resize() de l’instance sharp pour redimensionner l’image et la sauvegarder dans le répertoire du projet. Ensuite, vous enchaînerez la méthode format() sur l’image redimensionnée pour changer son format de png à jpeg. De plus, vous passerez une option à la méthode format() pour compresser l’image et la sauvegarder dans le répertoire.

Créez et ouvrez le fichier resizeImage.js dans votre éditeur de texte :

nano resizeImage.js

Ajoutez le code suivant pour redimensionner l’image à une largeur de 150px et une hauteur de 97px :

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFile("sammy-resized.png");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

La fonction resizeImage() enchaîne la méthode resize() du module sharp à l’instance sharp. La méthode prend un objet comme argument. Dans l’objet, vous définissez les dimensions de l’image souhaitées en utilisant les propriétés width et height. En définissant la width sur 150 et la height sur 97, l’image fera 150px de large et 97px de haut.

Après avoir redimensionné l’image, vous enchaînez la méthode toFile() du module sharp, qui prend le chemin de l’image comme argument. En passant sammy-resized.png comme argument, le fichier image sera enregistré avec ce nom dans le répertoire de travail de votre programme.

Enregistrez et quittez maintenant le fichier. Exécutez votre programme dans le terminal :

node resizeImage.js

Vous n’aurez aucune sortie, mais vous devriez voir un nouveau fichier image créé avec le nom sammy-resized.png dans le répertoire du projet.

Ouvrez l’image sur votre machine locale. Vous devriez voir une image de Sammy 150px de large et 97px de haut :

Maintenant que vous pouvez redimensionner une image, ensuite vous convertirez le format de l’image redimensionnée de png en jpeg, compresserez l’image, et l’enregistrerez dans le répertoire de travail. Pour ce faire, vous utiliserez la méthode toFormat(), que vous enchaînerez après la méthode resize().

Ajoutez le code en surbrillance pour changer le format de l’image en jpeg et la compresser :

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFormat("jpeg", { mozjpeg: true })
      .toFile("sammy-resized-compressed.jpeg");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

Dans la fonction resizeImage(), vous utilisez la méthode toFormat() du module sharp pour changer le format de l’image et la compresser. Le premier argument de la méthode toFormat() est une chaîne de caractères contenant le format d’image auquel vous souhaitez convertir votre image. Le deuxième argument est un objet optionnel contenant des options de sortie qui améliorent et compressent l’image.

Pour compresser l’image, vous lui passez une propriété mozjpeg qui contient une valeur booléenne. Lorsque vous la définissez sur true, sharp utilise les paramètres par défaut de mozjpeg pour compresser l’image sans sacrifier la qualité. L’objet peut également prendre plus d’options ; consultez la documentation sharp pour plus de détails.

Ensuite, passez à la méthode toFile() un nom de fichier différent pour enregistrer l’image compressée sous le nom de sammy-resized-compressed.jpeg.

Maintenant, enregistrez et quittez le fichier, puis exécutez votre code avec la commande suivante :

node resizeImage.js

Vous ne recevrez aucune sortie, mais un fichier image sammy-resized-compressed.jpeg est enregistré dans votre répertoire de projet.

Ouvrez l’image sur votre machine locale et vous verrez l’image suivante :

Avec votre image maintenant compressée, vérifiez la taille du fichier pour confirmer que votre compression est réussie. Dans votre terminal, exécutez la commande du pour vérifier la taille du fichier pour sammy.png :

du -h sammy.png

L’option -h produit une sortie lisible par l’homme vous montrant la taille du fichier en kilooctets, mégaoctets et bien d’autres.

Après avoir exécuté la commande, vous devriez voir une sortie similaire à ceci :

Output
120K    sammy.png

La sortie montre que l’image d’origine fait 120 kilooctets.

Ensuite, vérifiez la taille du fichier pour sammy-resized.png :

du -h sammy-resized.png

Après avoir exécuté la commande, vous verrez la sortie suivante :

Output
8.0K     sammy-resized.png

Le fichier sammy-resized.png fait maintenant 8 kilo-octets, contre 120 kilo-octets auparavant. Cela montre que l’opération de redimensionnement affecte la taille du fichier.

Maintenant, vérifiez la taille du fichier pour sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

Après avoir exécuté la commande, vous verrez la sortie suivante :

Output
4.0K    sammy-resized-compressed.jpeg

Le fichier sammy-resized-compressed.jpeg fait maintenant 4 kilo-octets, contre 8 kilo-octets précédemment, vous faisant ainsi économiser 4 kilo-octets, ce qui montre que la compression a fonctionné.

Maintenant que vous avez redimensionné une image, changé son format et compressé celle-ci, vous allez recadrer et convertir l’image en niveaux de gris.

Étape 4 — Recadrage et Conversion d’Images en Niveaux de Gris

Dans cette étape, vous allez recadrer une image et la convertir en niveaux de gris. Le recadrage est le processus de suppression des zones non désirées d’une image. Vous utiliserez la méthode extend() pour recadrer l’image sammy.png. Ensuite, vous enchaînerez la méthode grayscale() sur l’instance de l’image recadrée et la convertirez en niveaux de gris.

Créez et ouvrez cropImage.js dans votre éditeur de texte :

nano cropImage.js

Dans votre fichier cropImage.js, ajoutez le code suivant pour recadrer l’image :

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70  })
      .toFile("sammy-cropped.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

La fonction cropImage() est une fonction asynchrone qui lit une image et retourne votre image recadrée. Dans le bloc try, une instance de sharp lira l’image. Ensuite, la méthode extract() du module sharp enchaînée à l’instance prend un objet avec les propriétés suivantes :

• width : la largeur de la zone que vous souhaitez recadrer.
• height : la hauteur de la zone que vous souhaitez recadrer.
• top : la position verticale de la zone que vous souhaitez recadrer.
• left : la position horizontale de la zone que vous souhaitez recadrer.

Lorsque vous définissez la width sur 500 et la height sur 330, imaginez que sharp crée une boîte transparente sur l’image que vous souhaitez recadrer. Toute partie de l’image qui rentre dans la boîte restera, et le reste sera coupé :

Les propriétés top et left contrôlent la position de la boîte. Lorsque vous définissez left sur 120, la boîte est positionnée à 120px du bord gauche de l’image, et en définissant top sur 70, la boîte est positionnée à 70px du bord supérieur de l’image.

La zone de l’image qui rentre dans la boîte sera extraite et sauvegardée dans sammy-cropped.png en tant qu’image séparée.

Enregistrez et quittez le fichier. Exécutez le programme dans le terminal :

node cropImage.js

La sortie ne sera pas affichée mais l’image sammy-cropped.png sera enregistrée dans votre répertoire de projet.

Ouvrez l’image sur votre machine locale. Vous devriez voir l’image recadrée :

Maintenant que vous avez recadré une image, vous allez convertir l’image en niveaux de gris. Pour ce faire, vous allez chaîner la méthode grayscale à l’instance sharp. Ajoutez le code en surbrillance pour convertir l’image en niveaux de gris :

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70 })
      .grayscale()
      .toFile("sammy-cropped-grayscale.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

La fonction cropImage() convertit l’image recadrée en niveaux de gris en chaînant la méthode grayscale() du module sharp à l’instance sharp. Ensuite, elle enregistre l’image dans le répertoire du projet sous le nom sammy-cropped-grayscale.png.

Appuyez sur CTRL+X pour enregistrer et quitter le fichier.

Exécutez votre code dans le terminal :

node cropImage.js

Ouvrez sammy-cropped-grayscale.png sur votre machine locale. Vous devriez maintenant voir l’image en niveaux de gris :

Maintenant que vous avez recadré et extrait l’image, vous allez travailler sur sa rotation et son flou.

Étape 5 — Rotation et flou d’images

Dans cette étape, vous allez faire pivoter l’image sammy.png de 33 degrés. Vous allez également appliquer un flou gaussien à l’image rotative. Un flou gaussien est une technique de floutage d’une image en utilisant la fonction gaussienne, ce qui réduit le niveau de bruit et de détails sur une image.

Créez un fichier rotateImage.js dans votre éditeur de texte :

nano rotateImage.js

Dans votre fichier rotateImage.js, écrivez le bloc de code suivant pour créer une fonction qui fait pivoter sammy.png à un angle de 33 degrés :

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .toFile("sammy-rotated.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

La fonction rotateImage() est une fonction asynchrone qui lit une image et renverra l’image pivotée à un angle de 33 degrés. À l’intérieur de la fonction, la méthode rotate() du module sharp prend deux arguments. Le premier argument est l’angle de rotation de 33 degrés. Par défaut, sharp rend l’arrière-plan de l’image pivotée en noir. Pour supprimer l’arrière-plan noir, vous passez un objet en tant que deuxième argument pour rendre l’arrière-plan transparent.

L’objet a une propriété background qui contient un objet définissant le modèle de couleur RGBA. RGBA signifie rouge, vert, bleu et alpha.

• r : contrôle l’intensité de la couleur rouge. Il accepte une valeur entière de 0 à 255. 0 signifie que la couleur n’est pas utilisée et 255 est le rouge à son maximum.

• g : contrôle l’intensité de la couleur verte. Il accepte une valeur entière de 0 à 255. 0 signifie que la couleur verte n’est pas utilisée et 255 est le vert à son maximum.

• b : contrôle l’intensité de la couleur bleue. Il accepte également une valeur entière entre 0 et 255. 0 signifie que la couleur bleue n’est pas utilisée et 255 est le bleu à son maximum.

• alpha: contrôle l’opacité de la couleur définie par les propriétés r, g et b. 0 ou 0,0 rend la couleur transparente et 1 ou 1,1 rend la couleur opaque.

Pour que la propriété alpha fonctionne, assurez-vous de définir et de définir les valeurs pour r, g et b. Définir les valeurs r, g et b à 0 crée une couleur noire. Pour créer un arrière-plan transparent, vous devez d’abord définir une couleur, puis vous pouvez définir alpha sur 0 pour le rendre transparent.

Enregistrez et quittez maintenant le fichier. Exécutez votre script dans le terminal:

node rotateImage.js

Vérifiez si le fichier sammy-rotated.png existe dans votre répertoire de projet. Ouvrez-le sur votre machine locale.

Vous devriez voir l’image pivotée à un angle de 33 degrés:

Ensuite, vous allez rendre l’image pivotée floue. Vous y parviendrez en enchaînant la méthode blur() à l’instance sharp.

Entrez le code surligné ci-dessous pour rendre l’image floue:

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .blur(4)
      .toFile("sammy-rotated-blurred.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

La fonction rotateImage() lit maintenant l’image, la fait pivoter et lui applique un flou gaussien. Elle applique un flou gaussien à l’image en utilisant la méthode blur() du module sharp. La méthode accepte un seul argument contenant une valeur sigma entre 0.3 et 1000. En lui passant 4, un flou gaussien avec une valeur sigma de 4 sera appliqué. Après que l’image a été floutée, vous définissez un chemin pour enregistrer l’image floutée.

Votre script va maintenant flouter l’image pivotée avec une valeur sigma de 4. Enregistrez et quittez le fichier, puis exécutez le script dans votre terminal :

node rotateImage.js

Après avoir exécuté le script, ouvrez le fichier sammy-rotated-blurred.png sur votre machine locale. Vous devriez maintenant voir l’image pivotée floutée :

Maintenant que vous avez pivoté et flouté une image, vous allez composer une image sur une autre.

Étape 6 — Composition d’images en utilisant composite()

La composition d’images est un processus qui consiste à combiner deux ou plusieurs images distinctes pour créer une seule image. Cela est fait pour créer des effets qui empruntent les meilleurs éléments des différentes photos. Un autre cas d’utilisation courant est d’ajouter un filigrane à une image avec un logo.

Dans cette section, vous allez superposer sammy-transparent.png sur underwater.png. Cela créera l’illusion que Sammy nage profondément dans l’océan. Pour superposer les images, vous allez chaîner la méthode composite() à l’instance sharp.

Créez et ouvrez le fichier compositeImage.js dans votre éditeur de texte :

nano compositeImages.js

Maintenant, créez une fonction pour superposer les deux images en ajoutant le code suivant dans le fichier compositeImages.js :

const sharp = require("sharp");

async function compositeImages() {
  try {
    await sharp("underwater.png")
      .composite([
        {
          input: "sammy-transparent.png",
          top: 50,
          left: 50,
        },
      ])
      .toFile("sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

compositeImages()

La fonction compositeImages() lit d’abord l’image underwater.png. Ensuite, vous enchaînez la méthode composite() du module sharp, qui prend un tableau comme argument. Le tableau contient un seul objet qui lit l’image sammy-transparent.png. L’objet a les propriétés suivantes :

• input : prend le chemin de l’image que vous souhaitez superposer sur l’image traitée. Il accepte également un Buffer, un Uint8Array ou un Uint8ClampedArray en entrée.
• top : contrôle la position verticale de l’image que vous souhaitez superposer. Définir top sur 50 décale l’image sammy-transparent.png de 50px depuis le bord supérieur de l’image underwater.png.
• left: contrôle la position horizontale de l’image que vous souhaitez composer sur une autre. En définissant left sur 50, vous décalez l’image sammy-transparent.png de 50 pixels depuis le bord gauche de l’image underwater.png.

La méthode composite() nécessite une image de taille similaire ou plus petite que l’image traitée.

Pour visualiser ce que fait la méthode composite(), imaginez-la comme créant une pile d’images. L’image sammy-transparent.png est placée au-dessus de l’image underwater.png:

Les valeurs top et left positionnent l’image sammy-transparent.png par rapport à l’image underwater.png.

Enregistrez votre script et quittez le fichier. Exécutez votre script pour créer une composition d’images:

node compositeImages.js

Ouvrez sammy-underwater.png sur votre machine locale. Vous devriez maintenant voir l’image sammy-transparent.png composée sur l’image underwater.png:

Vous avez maintenant composé des images en utilisant la méthode composite(). À l’étape suivante, vous utiliserez la méthode composite() pour ajouter du texte à une image.

Étape 7 — Ajouter du texte sur une image

Dans cette étape, vous allez écrire du texte sur une image. Au moment de l’écriture, sharp n’a pas de moyen natif d’ajouter du texte à une image. Pour ajouter du texte, tout d’abord, vous allez écrire du code pour dessiner du texte en utilisant le Scalable Vector Graphics(SVG). Une fois que vous avez créé l’image SVG, vous allez écrire du code pour composer l’image avec l’image sammy.png en utilisant la méthode composite.

SVG est un langage de balisage basé sur XML pour créer des graphiques vectoriels pour le web. Vous pouvez dessiner du texte, ou des formes telles que des cercles, des triangles, ainsi que dessiner des formes complexes telles que des illustrations, des logos, etc. Les formes complexes sont créées avec un outil graphique comme Inkscape qui génère le code SVG. Les formes SVG peuvent être rendues et mises à l’échelle à n’importe quelle taille sans perte de qualité.

Créez et ouvrez le fichier addTextOnImage.js dans votre éditeur de texte.

nano addTextOnImage.js

Dans votre fichier addTextOnImage.js, ajoutez le code suivant pour créer un conteneur SVG:

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
    </svg>
    `;
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

La fonction addTextOnImage() définit quatre variables: width, height, text, et svgImage. width contient l’entier 750, et height contient l’entier 483. text contient la chaîne Sammy the Shark. C’est le texte que vous dessinerez en utilisant SVG.

La variable svgImage contient l’élément svg. L’élément svg a deux attributs : width et height qui interpolent les variables width et height que vous avez définies précédemment. L’élément svg crée un conteneur transparent selon la largeur et la hauteur données.

Vous avez donné à l’élément svg une width de 750 et une height de 483 afin que l’image SVG ait la même taille que sammy.png. Cela aidera à centrer le texte sur l’image sammy.png.

Ensuite, vous allez dessiner les graphiques de texte. Ajoutez le code en surbrillance pour dessiner Sammy the Shark sur le conteneur SVG :

async function addTextOnImage() {
    ...
    const svg = `
    <svg width="${width}" height="${height}">
    <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
  ....
}

L’élément text SVG a quatre attributs : x, y, text-anchor, et class. x et y définissent la position du texte que vous dessinez sur le conteneur SVG. L’attribut x positionne le texte horizontalement, et l’attribut y positionne le texte verticalement.

En fixant x à 50%, vous dessinez le texte au milieu du conteneur sur l’axe des x, et en fixant y à 50%, vous positionnez le texte au milieu sur l’axe des y de l’image SVG.

La propriété text-anchor aligne le texte horizontalement. En fixant text-anchor à middle, le texte est aligné au centre sur la coordonnée x que vous avez spécifiée.

La class définit un nom de classe sur l’élément text. Vous utiliserez le nom de classe pour appliquer des styles CSS à l’élément text.

${text} interpole la chaîne Sammy the Shark stockée dans la variable text. C’est le texte qui sera dessiné sur l’image SVG.

Ensuite, ajoutez le code en surbrillance pour styliser le texte en utilisant CSS :

    const svg = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;

Dans ce code, fill change la couleur du texte en noir, font-size change la taille de la police, et font-weight change le poids de la police.

À ce stade, vous avez écrit le code nécessaire pour dessiner le texte Sammy the Shark avec SVG. Ensuite, vous sauvegarderez l’image SVG en tant que png avec sharp afin que vous puissiez voir comment SVG dessine le texte. Une fois cela fait, vous composerez l’image SVG avec sammy.png.

Ajoutez le code en surbrillance pour sauvegarder l’image SVG en tant que png avec sharp :

    ....
    const svgImage = `
    <svg width="${width}" height="${height}">
    ...
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

Buffer.from() crée un objet Buffer à partir de l’image SVG. Un tampon est un espace temporaire en mémoire qui stocke des données binaires.

Après avoir créé l’objet tampon, vous créez une instance sharp avec l’objet tampon en entrée. En plus d’un chemin d’image, sharp accepte également un tampon, Uint9Array ou Uint8ClampedArray.

Enfin, vous enregistrez l’image SVG dans le répertoire du projet sous le nom svg-image.png.

Voici le code complet:

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage()

Enregistrez et quittez le fichier, puis exécutez votre script avec la commande suivante:

node addTextOnImage.js

sudo apt update
sudo apt install fontconfig

Ouvrez svg-image.png sur votre machine locale. Vous devriez maintenant voir le texte Sammy the Shark rendu avec un arrière-plan transparent:

Maintenant que vous avez confirmé que le code SVG dessine le texte, vous allez composer les graphiques de texte sur sammy.png.

Ajoutez le code surligné suivant pour composer l’image graphique de texte SVG sur l’image sammy.png.

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp("sammy.png")
      .composite([
        {
          input: svgBuffer,
          top: 0,
          left: 0,
        },
      ])
      .toFile("sammy-text-overlay.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

La méthode composite() lit l’image SVG à partir de la variable svgBuffer, et la positionne à 0 pixels du haut et à 0 pixels du bord gauche de sammy.png. Ensuite, vous enregistrez l’image composée sous le nom sammy-text-overlay.png.

Enregistrez et fermez votre fichier, puis exécutez votre programme en utilisant la commande suivante:

node addTextOnImage.js

Ouvrez sammy-text-overlay.png sur votre machine locale. Vous devriez voir du texte ajouté sur l’image:

Vous avez maintenant utilisé la méthode composite() pour ajouter du texte créé avec SVG sur une autre image.

Conclusion

Dans cet article, vous avez appris à utiliser des méthodes pointues pour traiter les images en Node.js. Tout d’abord, vous avez créé une instance pour lire une image et utilisé la méthode metadata() pour extraire les métadonnées de l’image. Ensuite, vous avez utilisé la méthode resize() pour redimensionner une image. Ensuite, vous avez utilisé la méthode format() pour changer le type d’image et compresser l’image. Ensuite, vous avez procédé à l’utilisation de diverses méthodes pointues pour recadrer, convertir en niveaux de gris, faire pivoter et estomper une image. Enfin, vous avez utilisé la méthode composite() pour composer une image et ajouter du texte sur une image.

Pour plus d’informations sur des méthodes pointues supplémentaires, consultez la documentation de sharp. Si vous souhaitez continuer à apprendre Node.js, consultez la série How To Code in Node.js.