Travailler avec des images dans Node.js

Online Coding Courses for Kids

introduction

Les images faisant désormais partie intégrante du Web, le besoin de traitement d’image devient omniprésent. Il existe diverses bibliothèques et binaires utilisés pour le traitement d’image dans Node.js, dont deux sont GraphismeMagick et ImageMagick.

ImageMagick est un logiciel de traitement d’images open source pour la création, la modification et la conversion d’images. GraphicsMagick est un outil similaire qui était à l’origine un fork du projet ImageMagick qui est devenu un projet indépendant à part entière avec plusieurs améliorations.

Certains des avantages de GraphicsMagick par rapport à ImageMagick incluent plus d’efficacité, une taille plus petite, moins d’exploits de sécurité et est généralement plus stable qu’ImageMagick. Ils sont tous deux disponibles pour une utilisation dans Node.js en tant que packages NPM: GraphicsMagick et ImageMagick.

Installation de GraphicsMagick et ImageMagick

Avant d’installer l’un de ces packages, vous devez télécharger et installer les outils d’interface de ligne de commande (CLI) sur votre système. Vous pouvez également utiliser ImageMagick directement à partir de GraphicsMagick.

Si vous prévoyez d’utiliser le module GraphicsMagick, vous pouvez installer les outils CLI ImageMagick ou GraphicsMagick. Si à la place, vous souhaitez utiliser ImageMagick, vous devez installer l’outil CLI ImageMagick.

Après avoir téléchargé et installé l’outil CLI requis, vous pouvez vérifier la version de votre installation en exécutant les commandes suivantes sur votre terminal.

Pour ImageMagick:

$ convert -version

S’il a été installé avec succès, cela imprimera les détails du logiciel installé sur le terminal.

Pour GraphicsMagick:

$ gm convert logo: logo.miff
$ gm convert logo.miff win:

De même, si l’installation a réussi, cela affichera le logo GraphicsMagick dans une fenêtre.

Ensuite, pour ajouter le module à votre projet, nous utiliserons npm.

Pour ImageMagick:

$ npm install imagemagick

Pour GraphicsMagick:

$ npm install gm

Traitement d’image dans Node.js avec GraphicsMagick

Dans ce didacticiel, nous allons apprendre à travailler avec des images dans Node.js en utilisant à la fois GraphicsMagick et ImageMagick. Dans cette section, nous commencerons par GraphicsMagick.

Créez un dossier appelé node-graphics-magick, cd dans le dossier, initialisez le projet Node avec les paramètres par défaut et installez GraphicsMagick comme indiqué ci-dessous:

$ mkdir node-graphics-magick
$ cd node-graphics-magick
$ npm init -y
$ npm install gm

Ensuite, ouvrez le dossier avec votre éditeur de code préféré et créez un index.js fichier. Pour utiliser le module dans le projet, importez-le en utilisant require(). Nous ajouterons également le système de fichiers natif (fs) pour nous aider à interagir avec le système de fichiers:

const fs = require('fs');
const gm = require('gm');

Vous souhaitez également ajouter une image à votre dossier qui sera utilisée dans ce tutoriel, nous la nommerons sample_image.

Comme mentionné précédemment, le module GraphicsMagick vous permet également d’utiliser ImageMagick. Si vous souhaitez utiliser cette option, vous devez importer la sous-classe:

const gm = require('gm').subClass({imageMagick: true});

Appelant le gm Constructeur

Vous pouvez appeler le gm méthode constructeur.

  1. En passant le chemin de l’image en tant qu’argument de chaîne:
const gm = require('gm');

gm('sample_image');
  1. Vous pouvez également passer un ReadableStream ou Buffer comme premier argument, avec un nom de fichier facultatif pour l’inférence de format:
const gm = require('gm');

// ReadableStream
let readableImageFileStream = fs.createReadStream('sample_image1.jpeg');
gm(readableImageFileStream, sample_image);

// Buffer
let imageFileBuffer = fs.readFileSync('sample_image1.jpeg');
gm(imageFileBuffer);
  1. Une autre option consiste à passer deux entiers pour width et height avec une couleur d’arrière-plan optionnelle pour créer une nouvelle image à la volée:
const gm = require('gm');

gm(300, 300, "#00ff55aa");

Obtenir des informations sur l’image

GraphicsMagick fournit plusieurs getters pour récupérer des informations sur les images. L’un est le identify() méthode. Il renvoie toutes les données d’image disponibles:

const gm = require('gm');

gm("sample_image.jpg").identify(function(err, value) {
    console.log(value);

    if(err) {
        console.log(err);
    }
});

Après avoir inclus le gm module, nous avons appelé le gm() constructeur, puis appelé le identify() fonction en passant une fonction qui prend deux arguments – err pour obtenir une erreur qui se produit et value qui contient les informations sur l’image.

Nous imprimons le value sur notre console et vérifier s’il y a une erreur. Si une erreur se produit, elle sera enregistrée dans la console. Vous pouvez utiliser ce bloc pour détecter les erreurs et afficher les messages appropriés dans des situations réelles.

Notez que la valeur pourrait être undefined.

L’exécution de ce code renverra un objet avec toutes les données d’image disponibles pour l’image. Voici à quoi ressemble la sortie d’une image que nous avons utilisée:

{
  Format: 'JPEG (Joint Photographic Experts Group JFIF format)',
  format: 'JPEG',
  Geometry: '213x133',
  size: { width: 213, height: 133 },
  Class: 'DirectClass',
  Type: 'true color',
  Depth: '8 bits-per-pixel component',
  ...
  Signature: 'ae5b5e492457ac667e9a4cb1e7b78b7e6459fbf342ea741857ee4e9e1092ad73',
  Tainted: 'False',
  path: 'sample_image.jpg'
}

Il fournit des informations sur size, resolution, file size et la couleur de l’image depth entre autres. Si vous souhaitez obtenir certains de ces détails individuellement, il existe une fonction distincte pour les obtenir, telle que: size(), format(), depth(), orientation(), res(), etc.

Ils ont tous la même syntaxe que le identify() une fonction. Par exemple, si nous voulions récupérer la taille d’une image, nous utiliserions:

const gm = require('gm');

gm("sample_image.png").size(function(err, value) {
    console.log(value);
    if(err) {
        console.log(err);
    }
});

Redimensionner les images

Il est également courant de redimensionner les images. La syntaxe du resize() fonctions est:

resize(width, [, height [, options]])

Où le height et options les paramètres sont facultatifs. le options le paramètre peut être soit %, @, !, < ou >. Nous couvrirons chacun de ces éléments.

le width et height spécifiées sont les valeurs maximales autorisées pour les deux propriétés.

Sans préciser aucun options, GraphicsMagick conservera le rapport hauteur / largeur de l'image d'origine. Si les deux width et height sont données, l'image sera redimensionnée jusqu'à ce qu'elle atteigne la valeur maximale pour l'un ou l'autre.

Cependant, vous pouvez forcer le module à se redimensionner au width et height en utilisant le ! option.

Nous utilisons également le write() pour enregistrer la sortie dans un nouveau fichier.

Redimensionner une image à un particulier width tout en conservant le rapport hauteur / largeur:

const gm = require('gm');

gm("sample_image.jpg")
    .resize(200)
    .write('resized_img_width_only.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });

On peut également redimensionner une image jusqu'à ce que sa taille atteigne soit le maximum width ou height tout en conservant le rapport d'aspect:

const gm = require('gm');

gm("sample_image.jpg")
    .resize(200, 200)
    .write('resized_img_widthandheight.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    })

Ou, nous pouvons redimensionner une image pour l'adapter exactement width et height, éventuellement en modifiant le rapport hauteur / largeur d'origine:

const gm = require('gm');

gm("sample_image.jpg")
    .resize(600, 200, '!')
    .write('resized_to_fit.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });

Nous pouvons également utiliser des pourcentages au lieu de pixels pour redimensionner les images, c'est-à-dire que nous pouvons redimensionner l'image à 50% de sa taille d'origine:

const gm = require('gm');

gm("img.png")
    .resize(50, 50, "%")
    .write('resized_img_percentage.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });

Bien sûr, vous pouvez également donner un pourcentage supérieur à 100% pour agrandir l'image.

Une autre option intéressante que vous pouvez utiliser est @, qui redimensionne l'image de telle sorte qu'elle occupe au maximum width*height pixels. Cela signifie que si vous écrivez quelque chose comme ceci:

const gm = require('gm');

gm("sample_image.jpg")
    .resize(100, 100, "@")
    .write('resized_img_max_area_in_pixels.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });

L'image sera redimensionnée afin qu'elle s'adapte à une zone de 10 000 pixels (100 * 100 = 10 000 pixels). En d'autres termes, si nous multiplions la largeur et la hauteur de l'image résultante, ce sera un nombre inférieur ou égal à 10 000.

Maintenant, nous allons prendre à la > et < options:

  • le > L'option redimensionne une image uniquement si la largeur et la hauteur de l'image donnée sont plus grand que le donné width et height.
  • le < L'option redimensionne une image uniquement si la largeur et la hauteur de l'image donnée sont plus petite que le donné width et height.
const gm = require('gm');

// Resize image if image width is greater than 100 and image height is greater than 100
gm("sample_image.jpg")
    .resize(100, 100, ">")
    .write('resized_img_greater_than_100x100.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });
    
// Resize image if image width is less than 100 and image height is less than 100
gm("sample_image.jpg")
    .resize(100, 100, "<")
    .write('resized_img_less_than_100x100.jpg', function (err) {
        if(err) console.log(err);
        console.log("Done!")
    });

Conversion d'images d'un format à un autre

Une autre chose courante que nous voudrions faire avec les images est de convertir une image d'un format à un autre. Cela peut être fait de manière très simple, en changeant simplement l'extension de fichier dans l'un des formats pris en charge:

const gm = require('gm');

gm("sample_image.jpg")
    .write('sample_image.png', function(err) {
        if(err) console.log(err);
        console.log("Jpg to png!")
    });

Recadrer des images

Outre le redimensionnement des images, vous pouvez également recadrer les images dans votre application. GraphicsMagick a un crop() fonction et sa syntaxe est:

gm("sample_image.png").crop(width, height, [x, y[, percentage]])

Où les paramètres ont la signification suivante:

  • width et height sont les dimensions sur lesquelles vous souhaitez rogner l'image. Ceux-ci sont traités soit comme des nombres de pixels, soit comme des pourcentages de l'image d'origine en fonction de la percentage paramètre.
  • x et y sont des paramètres facultatifs et représentent les coordonnées de la position à partir de laquelle le recadrage doit commencer. La valeur par défaut est 0 pour les deux, ce qui signifie que le recadrage commence à partir du coin supérieur gauche de l'image.
  • le percentage paramètre est également facultatif et utilisé pour spécifier si les valeurs du width et height représentent des pourcentages des dimensions ou des pixels de l'image. le percentage l'option par défaut est false.
const gm = require('gm');

// Crop image to 100x100 at position 20, 20
gm("sample_image.jpg")
    .crop(100, 100, 20, 20)
    .write('resized_img_crop.jpg', function (err, value) {
        if(err) console.log(err);
        console.log(value);
    });
    

// Crop image to 50% if both width and height at position 10, 10 
gm("sample_image.jpg")
    .crop(50, 50, 10, 10, true)
    .write('resized_img_crop1.jpg', function (err, value) {
        if(err) console.log(err);
        console.log(value);
    });

Encore une fois, si vous vérifiez les dimensions de la nouvelle image resized_img_crop1, vous pouvez voir qu'elle fait la moitié de la taille de l'image d'origine et qu'elle est recadrée à une position particulière plutôt qu'à partir du coin supérieur gauche.

L'image ci-dessous montre un exemple:
recadrage d'images avec gm

Nous avons examiné comment effectuer la manipulation d'images à l'aide de GraphicsMagick. Ensuite, nous verrons comment faire cela dans ImageMagick.

Traitement d'image dans Node.js avec ImageMagick

Le module ImageMagick n'a pas été maintenu depuis un certain temps et les développeurs conseillent même d'utiliser le module GraphicsMagick à la place. Cependant, pour ce didacticiel, nous examinerons brièvement certaines des principales fonctions de ce module.

Créez un dossier appelé node-image-magick en suivant les étapes de la section précédente, installez le module ImageMagick via npm et créez un index.js fichier.

dans le index.js fichier, ajoutez le module en utilisant require():

const im = require('image-magick');

Obtention d'informations sur l'image

Pour obtenir des informations sur l'image, il existe un identify() méthode dans le image-magick module également. Le premier argument est le chemin d'accès à l'image et le second est une fonction de rappel qui a deux arguments: err pour la gestion des erreurs et info pour récupérer les informations sur l'image:

const im = require('image-magick');

im.identify('sample_image.jpg', function (err, info) {
    if(err) console.log(err);
    console.log(info);
});

L'exécution de ce code pour notre image s'imprime:

{
  format: 'JPEG',
  'mime type': 'image/jpeg',
  class: 'DirectClass',
  geometry: '213x133+0+0',
  units: 'Undefined',
  colorspace: 'sRGB',
  type: 'TrueColor',
  'base type': 'Undefined',
  endianess: 'Undefined',
  depth: 8,
  'channel depth': { red: '8-bit', green: '8-bit', blue: '8-bit' },
  ...
  width: 213,
  height: 133
}

Redimensionner les images

ImageMagick fournit une fonction pratique pour redimensionner des images qui prend dans un objet avec des options pour redimensionner l'image et une fonction de rappel. Le redimensionnement des images à l'aide du module ImageMagick suit la syntaxe suivante:

const im = require('image-magick');

im.resize({
    srcPath: 'sample_image.jpg',
    dstPath: 'sample_image_resized.jpg',
    width:   256
  }, function(err, stdout, stderr){
       if (err) throw err;
       console.log('resized');
});

Recadrer des images

ImageMagick fournit également une fonction de recadrage d'images avec la même syntaxe que le resize() une fonction. Jetons un coup d'œil à un exemple d'utilisation simple:

const im = require('image-magick');

im.crop({
    srcPath: 'sample_image.jpg',
    dstPath: 'sample_image_cropped.jpg',
    width: 800,
    height: 600,
    quality: 1,
    gravity: "North"
  }, function(err, stdout, stderr){
       if(err) console.log(err);
});

La documentation fournit une liste des options pour chacune des fonctions ci-dessus.

Conclusion

Dans cet article, nous avons exploré comment travailler avec des images dans Node.js à l'aide des modules ImageMagick et GraphicsMagick. GraphicsMagick est la meilleure option des deux, compte tenu de tous ses avantages par rapport à ImageMagick.

Le module GraphicsMagick a une documentation complète sur plus d'options pour manipuler les images.


Close Menu