‫-: Dans cette vidéo, vous allez découvrir le traitement
‫et la manipulation d'images avec Node JS, et
‫dans ce cas particulier,
‫nous allons redimensionner et convertir nos images.
‫Ainsi, partout dans notre interface utilisateur,
‫nous supposons que les images téléchargées sont des carrés.
‫Pour que nous puissions ensuite
‫les afficher sous forme de cercles comme celui-ci.
‫Et donc cela ne fonctionne que lorsqu'il s'agit
‫de carrés, mais bien
‫sûr, dans le monde réel, les utilisateurs vont rarement télécharger
‫des images qui sont des carrés.
‫Et donc notre travail consiste
‫maintenant à redimensionner les images pour en faire des carrés.
‫D'accord, et voici comment nous allons procéder.
‫Nous ajouterons encore un autre middleware avant de me mettre à
‫jour, puis ce middleware se
‫chargera du traitement réel de l'image.
‫D'accord, alors faisons-le ici dans le code juste après
‫celui-ci, car ils
‫sont en quelque sorte connectés, n'est-ce pas ?
‫Donc, exporte le
‫point, redimensionne la photo de l'utilisateur.
‫Et avant de continuer, ajoutons en
‫fait ce middleware à la pile de middleware dans
‫cette route particulière.
‫C'est donc dans les routes
‫utilisateur, et donc ici juste après que la
‫photo ait
‫été téléchargée dans ce middleware, nous la redimensionnerons ensuite.
‫Alors redimensionnez, et ici c'est en fait
‫le contrôleur utilisateur.
‫Bien.
‫Descendons
‫ici et revenons.
‫Et donc à ce stade nous avons
‫déjà le dossier sur notre demande.
‫Au moins s'il y avait un téléchargement, et
‫s'il n'y avait pas de
‫téléchargement, alors bien sûr nous ne voulons rien faire.
‫Cela signifie donc que nous voulons passer au prochain middleware.
‫Donc, s'il n'y a pas de
‫fichier sur la demande, revenez tout de suite et passez au suivant.
‫D'accord, mais sinon, bien sûr, nous
‫voulons ensuite redimensionner l'image.
‫Et pour cela, nous allons utiliser le package sharp.
‫Bien.
‫Alors, tout d'abord, installons-le réellement.
‫Alors MPM installez sharp D'accord, et
‫puisque cela fait son travail, allons-y
‫et mettons-le déjà ici.
‫Si
‫pointu, et nécessite, pointu.
‫Et sharp est une bibliothèque de traitement
‫d'image vraiment agréable et facile à utiliser pour Node Js. Et il y a
‫pas mal de choses que
‫nous pouvons faire avec.
‫Mais là où il brille
‫vraiment, c'est pour redimensionner les images de manière très simple.
‫Et donc, c'est exactement ce que nous recherchons ici.
‫Bien.
‫Donc, nous disons sharp et puis ici, nous
‫devons essentiellement transmettre le fichier.
‫Maintenant, lorsque vous effectuez un traitement d'image comme
‫celui-ci juste après le téléchargement
‫d'un fichier, il est toujours préférable de ne même pas
‫enregistrer le fichier sur le disque, mais de l'enregistrer en mémoire.
‫Nous en avons déjà parlé auparavant,
‫et c'est donc maintenant le cas dans la pratique.
‫D'accord, donc pour cela, nous devons changer
‫un peu la configuration de multer et en
‫fait juste ce stockage de
‫multer, car maintenant nous n'avons plus besoin de tout cela.
‫Et au lieu de
‫multer le stockage, il s'agira simplement de multer le stockage en mémoire de points.
‫Et juste comme ça, d'accord ?
‫Et comme je l'ai mentionné
‫plus tôt, de cette façon, l'image sera ensuite stockée en tant que tampon.
‫Et donc ce tampon est alors
‫disponible à la demande dot file dot buffer et c'est donc beaucoup plus
‫efficace comme ça, donc au lieu d'avoir
‫à écrire le fichier sur le disque puis
‫à le relire ici.
‫Nous gardons simplement l'image en mémoire
‫et nous pouvons ensuite la lire, d'accord ?
‫Quoi qu'il en soit, appeler la fonction
‫sharp comme ceci ici créera alors un objet sur lequel
‫nous pourrons enchaîner plusieurs méthodes afin de faire notre traitement d'image.
‫Et donc le premier que nous allons faire est de redimensionner.
‫Donc, redimensionnez, puis ici nous pouvons spécifier la
‫largeur et la hauteur.
‫Et donc disons 500 et 500 alors rappelez-vous que nous voulons
‫des images carrées, et donc bien
‫sûr, la hauteur doit être la même
‫que la largeur.
‫Maintenant, cela va alors recadrer
‫l'image afin qu'elle couvre l'intégralité de ce carré 500 fois 500.
‫Et en fait, nous
‫pouvons modifier ce comportement par défaut si nous le souhaitons.
‫Et donc, encore une fois, jetons un coup d'œil
‫rapide à la documentation.
‫Alors disons, github sharp, mais en fait, leur propre site
‫Web est un peu
‫mieux, un peu plus complet.
‫Alors cliquons sur ce lien ici, et alors ici nous pouvons
‫en venir au redimensionnement, ce que nous
‫faisons actuellement et voici
‫ce dont je viens de parler.
‫D'accord, la valeur par défaut ici est que
‫l'image sera recadrée afin
‫de couvrir les deux dimensions fournies.
‫Mais nous pouvons aussi choisir contenir, remplir, à l'intérieur ou à l'extérieur.
‫Et, nous le ferions en définissant les options ici.
‫Nous pouvons donc définir la largeur, la hauteur, puis comme
‫troisième option, nous pourrions définir
‫cet objet d'options où nous pouvons ensuite définir l'ajustement.
‫On pourrait aussi définir la position, qui
‫est centre par défaut.
‫Vous voyez qu'il y a toutes
‫sortes de choses que nous pourrions vraiment définir pour affiner
‫notre traitement d'image.
‫Mais dans ce cas, ce que nous avons est suffisant.
‫Passons donc à l'étape suivante.
‫Parce que ce que je veux faire
‫ensuite, c'est de toujours convertir les images en jpeg, d'accord ?
‫Et pour cela, on utilise pour
‫formater, puis jpeg.
‫On peut aussi ensuite définir la qualité de ce jpeg.
‫Donc, en gros, pour
‫le compresser un peu afin qu'il
‫ne prenne pas autant de place et donc pour cela, nous
‫utilisons la méthode jpeg, et définissons une option dans cet objet avec une qualité
‫et disons 90 pour cent ici, d'accord ?
‫Donc, chaque méthode dans sa propre ligne ici,
‫c'est beaucoup plus agréable, mais en fait, nous n'avons pas fini.
‫Nous avons presque terminé, mais pas entièrement.
‫Parce que maintenant,
‫à la fin, nous voulons enfin l'écrire dans un fichier sur notre disque.
‫Et donc pour cela, nous pouvons utiliser pour déposer, maintenant
‫cette méthode ici a en fait
‫besoin du chemin complet vers le fichier.
‫Donc en gros des images
‫publiques, une barre oblique, des utilisateurs, et enfin
‫voici le nom du fichier, d'accord ?
‫Alors retirons cela en fait
‫de ce que nous avions ici auparavant.
‫Parce que bien sûr, nous voulons que nos images
‫aient un format similaire.
‫D'accord, alors copions ça.
‫Mais en fait, je ne vais pas le mettre ici.
‫Au lieu de cela, je
‫vais en fait l'enregistrer pour demander le nom du fichier dot file.
‫Maintenant pourquoi je fais comme ça ?
‫Eh bien, c'est parce qu'en ce moment ce
‫nom de fichier n'est pas défini.
‫Ainsi, lorsque nous décidons d'enregistrer l'image en mémoire comme tampon, le nom du fichier
‫ne sera pas vraiment défini, mais nous avons vraiment besoin
‫de ce nom de fichier
‫dans notre autre fonction middleware, n'est-ce pas ?
‫C'est donc ici pour me mettre à jour ici.
‫Nous nous appuyons donc sur le nom du fichier dot
‫file pour enregistrer le nom du fichier dans notre base de données, n'est-ce pas ?
‫Et donc en fait, nous devrions définir cela.
‫Et donc, auparavant, il était bien
‫sûr défini par le téléchargement multer que nous avions, mais
‫puisque cela a disparu maintenant, nous devrions alors le redéfinir fondamentalement ici.
‫D'accord?
‫Alors là, effectivement, on peut se
‫débarrasser de cette partie de l'extension, car on
‫sait déjà que ce sera toujours un jpeg.
‫À cause de cela pour formater, d'accord ?
‫Et donc ici, nous pouvons simplement mettre jpeg.
‫Il n'est donc pas nécessaire d'obtenir l'extension de fichier.
‫Et donc maintenant
‫ici, nous pouvons ensuite l'utiliser.
‫Req dot file nom du fichier dot, et
‫c'est tout.
‫D'accord?
‫Donc, tout ce que nous
‫devons faire maintenant pour terminer est d'appeler le prochain middleware de la pile.
‫Et ce sera donc la fonction de gestionnaire de mise à jour.
‫Alors bien sûr, testons cela maintenant.
‫Donc, nous n'avons plus besoin de celui-ci.
‫Venons-en à Postman, et maintenant
‫l'utilisateur que je
‫veux mettre à jour s'appelle arrav, je pense.
‫Jetons un coup d'œil ici à nos données très rapidement.
‫Et donc oui, c'est donc l'image non carrée que nous
‫allons télécharger maintenant et en fait,
‫vous voyez la taille ici
‫qui est de 1000 fois 1500, et comparons
‫donc plus tard cela avec notre
‫image téléchargée redimensionnée.
‫Bien.
‫Quoi qu'il
‫en soit, obtenons
‫maintenant le nom d'arrav.
‫Pour que nous puissions ensuite le
‫mettre à jour et vous voyez que l'image en ce moment est ici l'utilisateur 11.
‫Et juste pour le voir
‫un peu mieux, mettons
‫à jour, connectons-nous réellement à notre application Web en utilisant
‫cet utilisateur.
‫Alors testez un, deux, trois, quatre.
‫D'accord, c'est donc l'image actuelle et maintenant
‫allons-y et mettons-la à jour.
‫Sélectionnez les fichiers, et voici notre
‫image, ouvrez-la et voyons ce qui se passe.
‫Et nous avons terminé.
‫C'était en fait très
‫rapide, alors voyons si c'est correct.
‫Eh bien au moins le nom ici semble correct.
‫Si nous jetons un coup d'œil à nos utilisateurs maintenant ici,
‫c'est en public, ou juste ici.
‫Donc ça devrait être celui qui en fait ce
‫n'est pas le cas.
‫Et en fait, il est introuvable.
‫Rechargeons, ah, et
‫voilà.
‫Maintenant, c'est celui-là.
‫Donc vous voyez que maintenant c'est à 500 fois
‫500 c'est beaucoup
‫plus petit ici, donc 55 par rapport aux 315 que nous avions auparavant.
‫C'est donc beaucoup
‫mieux, et comme vous le verrez ici, il devrait
‫maintenant être mis à jour ici aussi.
‫Et c'est parfait.
‫Donc, le visage est en fait au milieu ici.
‫Donc, ce redimensionnement s'est vraiment passé à la perfection.
‫Cool.
‫Et j'espère que vous trouverez
‫également une utilité à ce type
‫de traitement d'image dans vos propres applications.
‫Alors juste pour récapituler rapidement ce qu'on a fait ici.
‫Eh bien, nous avons créé une nouvelle fonction
‫middleware qui s'exécutera juste après le
‫téléchargement de la photo.
‫Et ce téléchargement se produit maintenant
‫dans un tampon et non plus directement dans le système de fichiers.
‫À droite?
‫Et c'est pourquoi nous utilisons ce stockage
‫de mémoire ici, mais bien sûr, ce filtre multer
‫ici fonctionne toujours.
‫Et donc nous ne pouvons toujours télécharger que des images, d'accord ?
‫Alors ici, dans ce middleware, nous mettons le nom de
‫fichier de cette image sur demande
‫dot file dot file name afin que nous puissions
‫ensuite l'utiliser dans la mise à jour moi.
‫D'accord, et puis nous avons
‫le traitement d'image lui-même.
‫Où nous l'avons d'abord redimensionné en
‫carré, puis formaté en
‫jpeg avec une qualité de 90 pour cent,
‫et enfin nous écrivons ce fichier dans notre
‫système de fichiers dans exactement le même dossier que nous avons spécifié auparavant.
‫D'accord, c'est ainsi que cela fonctionne lorsque vous avez
‫besoin d'un traitement d'image, mais
‫si vous n'en avez pas besoin, vous
‫pouvez bien sûr continuer à l'utiliser de cette façon, d'accord ?
‫Et donc c'est vraiment important que nous
‫ayons appris à le
‫faire dans les deux sens ici.
‫D'accord, dans la prochaine vidéo, nous
‫allons ensuite faire fonctionner ce formulaire ici afin que
‫nous puissions télécharger les photos des
‫utilisateurs directement à partir d'ici.