Node.js: redimensionnement d’image sans ImageMagick

Je développe une application Web sur Node.js (+ express 4) où les utilisateurs peuvent définir leur image de profil en la téléchargeant sur le serveur. Nous limitons déjà les fichiers mimetype et max filesize, l’utilisateur ne peut donc pas télécharger plus de 200 Ko de fichiers png ou jpeg.

Le problème est que nous aimerions redimensionner (côté serveur) la résolution de l’image téléchargée à 200×200 pour améliorer le chargement de la page et économiser de l’espace sur le disque. Après quelques recherches, toutes les réponses indiquent l’utilisation d’un module basé sur ImageMagick ou GraphicsMagick.

Cependant, le fait d’avoir à installer ImageMagick / GraphicsMagick pour effectuer un simple redimensionnement de l’image me semble trop exagéré. Y at-il une autre solution que Node.js?

J’ai récemment commencé à développer un module de traitement d’image pour NodeJS sans aucune dépendance d’exécution ( lisez pourquoi ). C’est encore au début, mais déjà utilisable.

Ce que vous demandez serait fait comme suit:

image.resize(200, 200, function(err, image){ // encode resized image to jpeg and get a Buffer object image.toBuffer('jpg', function(err, buffer){ // save buffer to disk / send over network / etc. }); }); 

Plus d’infos sur le repository Github du module.

Je voterais pour Sharp :

 sharp('input.jpg') .resize(200, 200) .toFile('ouput.jpg', function(err) { // output.jpg is a 200 pixels wide and 200 pixels high image // containing a scaled and cropped version of input.jpg }); 

Il est rapide, généralement 5 fois plus rapide que les liaisons de nœuds les plus rapides basées sur imagemagick , et fonctionne dans très peu de mémoire, peut – être 10 fois moins . Des liens pointus vers la bibliothèque d’images de libvips directement, il n’y a pas de shelling vers un programme externe, et la bibliothèque elle-même est plus rapide et efficace que * magick pour cette tâche. Il prend en charge des fonctions utiles telles que les stream et les entrées et sorties de mémoire tampon et de système de fichiers, la gestion des couleurs, la transparence, les promesses, les superpositions, WebP, SVG, etc.

A partir de 0,20, npm télécharge automatiquement les binarys pré-compilés complets sur la plupart des plates-formes, donc il n’y a pas besoin de node-gyp. Il suffit d’entrer:

 npm install sharp 

ou:

 yarn add sharp 

Et c’est parti.

Jetez un oeil à lwip: https://github.com/EyalAr/lwip

Très simple et facile à utiliser

 npm install lwip 

et ensuite dans votre code de noeud,

 // obtain an image object: require('lwip').open('image.jpg', function(err, image){ // check err... // define a batch of manipulations and save to disk as JPEG: image.batch() .scale(0.75) // scale to 75% .rotate(45, 'white') // rotate 45degs clockwise (white fill) .crop(200) // crop a 200X200 square from center .blur(5) // Gaussian blur with SD=5 .writeFile('output.jpg', function(err){ // check err... // done. }); }); 

Je l’ai implémenté avec succès dans mon uploader de fichier et cela fonctionne comme un charme.

Il y a une bonne bibliothèque de manipulation d’images entièrement écrite en JavaScript, sans aucune dépendance à d’autres bibliothèques, Jimp. https://github.com/oliver-moran/jimp

Exemple d’utilisation:

 var Jimp = require("jimp"); // open a file called "lenna.png" Jimp.read("lenna.png", function (err, lenna) { if (err) throw err; lenna.resize(256, 256) // resize .quality(60) // set JPEG quality .write("lena-small.jpg"); // save }); 

Sharp a connu une certaine popularité récemment, mais c’est la même idée que les liaisons * Magick.

Cependant, le fait d’avoir à installer ImageMagick / GraphicsMagick pour effectuer un redimensionnement simple de l’image me semble trop exagéré.

Le redimensionnement de l’image est tout sauf simple. Le format JPEG est particulièrement complexe et il existe plusieurs manières d’élargir les graphiques avec des résultats de qualité variable, dont peu sont faciles à mettre en œuvre. Les bibliothèques de traitement d’image existent pour faire ce travail, donc s’il n’y a pas d’autres raisons pour lesquelles vous ne pouvez pas les installer, allez-y.

Canvas est 2,3 fois plus rapide que ImageMagic.

Vous pouvez essayer de comparer les modules Node.js pour la manipulation d’images – https://github.com/ivanoff/images-manipulation-performance

 author's results: sharp.js : 9.501 img/sec; minFreeMem: 929Mb canvas.js : 8.246 img/sec; minFreeMem: 578Mb gm.js : 4.433 img/sec; minFreeMem: 791Mb gm-imagemagic.js : 3.654 img/sec; minFreeMem: 804Mb lwip.js : 1.203 img/sec; minFreeMem: 54Mb jimp.js : 0.445 img/sec; minFreeMem: 82Mb 

Si vous n’avez pas besoin d’une grande image, vous pouvez la redimensionner côté client avant de la télécharger:

Lecture de fichiers en JavaScript à l’aide des API de fichiers

Redimensionnement d’image côté client avec JavaScript avant le téléchargement sur le serveur

De nombreux utilisateurs peuvent avoir une bonne image d’eux-mêmes à partir d’un smartphone, et beaucoup d’entre eux ont plus de 200 Ko. Notez que les données fournies par le client ne sont pas fiables. Par conséquent, les vérifications côté serveur s’appliquent toujours.

J’utilisais lwip (comme suggéré précédemment par arvind) mais je suis passé à la culture png . Cela semble fonctionner un peu plus vite pour moi (Win 8.1 x64, Node v0.12.7). Le code dans le référentiel est incroyablement léger et opérationnel, il est simple à utiliser.

 var pngcrop = require('png-crop'); var config = {left: 10, top: 100, height: 150, width: 150}; pngcrop.crop('cats.png','cats-cropped.png',config); 

Bien sûr, ça ne fera que des fichiers png …