‫-: In questo video imparerai l'elaborazione e la
‫manipolazione delle immagini con Node JS, e
‫in questo caso particolare,
‫ridimensioneremo e convertiremo le nostre immagini.
‫Quindi ovunque nella nostra interfaccia
‫utente assumiamo che le immagini caricate siano quadrati.
‫In modo che possiamo
‫quindi visualizzarli come cerchi come questo.
‫E quindi funziona solo quando sono
‫quadrati, ma ovviamente
‫nel mondo reale gli utenti raramente caricheranno
‫immagini che sono quadrati.
‫E quindi il nostro lavoro
‫ora è ridimensionare effettivamente le immagini per renderle quadrate.
‫Va bene, quindi ecco come lo faremo.
‫Aggiungeremo ancora un altro middleware prima dell'aggiornamento e poi
‫quel middleware si
‫occuperà dell'effettiva elaborazione delle immagini.
‫Va bene, quindi in realtà facciamolo qui nel
‫codice subito dopo
‫questo, perché sono un po' connessi, no?
‫Quindi, esporta
‫punti, ridimensiona la foto dell'utente.
‫E prima di continuare, aggiungiamo
‫effettivamente questo middleware allo stack del middleware in
‫questo particolare percorso.
‫Quindi questo è nei percorsi
‫degli utenti, e quindi qui, subito dopo che
‫la foto
‫è stata caricata in questo middleware, la ridimensioneremo.
‫Quindi ridimensiona, e qui è in realtà
‫il controller dell'utente.
‫Bene.
‫In realtà scendiamo
‫qui e torniamo indietro.
‫E quindi a questo punto abbiamo già
‫il file sulla nostra richiesta.
‫Almeno se c'è stato un caricamento e
‫se non c'è stato
‫alcun caricamento, allora ovviamente non vogliamo fare nulla.
‫Quindi questo significa che vogliamo passare al prossimo middleware.
‫Quindi, se non ci
‫sono file sulla richiesta, torna subito e vai al prossimo.
‫Ok, ma per il resto, ovviamente,
‫allora vogliamo ridimensionare l'immagine.
‫E per questo, useremo il pacchetto sharp.
‫Bene.
‫Quindi, prima di tutto installiamolo.
‫Quindi MPM installa sharp Va bene, e
‫dal momento che sta facendo il suo lavoro andiamo
‫avanti e lo mettiamo già qui.
‫Così
‫tagliente, e richiede, tagliente.
‫E sharp è una libreria di
‫elaborazione delle immagini davvero bella e facile da usare per Node Js. E ci
‫sono molte cose che possiamo
‫fare con essa.
‫Ma dove brilla davvero è
‫il ridimensionamento delle immagini in un modo molto semplice.
‫E quindi, è esattamente quello che stiamo cercando qui.
‫Bene.
‫Quindi, diciamo nitido e quindi qui dobbiamo
‫sostanzialmente passare nel file.
‫Ora, quando si esegue un'elaborazione delle immagini
‫in questo modo subito dopo
‫aver caricato un file, è sempre meglio non salvare
‫nemmeno il file sul disco, ma salvarlo in memoria.
‫Ne abbiamo già parlato
‫prima, quindi ora lo facciamo in pratica.
‫Ok, quindi per questo abbiamo bisogno di
‫cambiare un po' o la configurazione multer e
‫in realtà solo questa memoria
‫multer, perché ora non abbiamo più bisogno di tutto questo.
‫E invece di più
‫spazio di archiviazione, sarà semplicemente l'archiviazione di memoria a più punti.
‫E proprio così, ok?
‫E quindi, come ho
‫detto prima, in questo modo l'immagine verrà archiviata come buffer.
‫E così quel buffer è quindi
‫disponibile su richiesta dot file dot buffer e quindi questo è molto più
‫efficiente in questo modo, quindi invece di
‫dover scrivere il file sul disco e poi
‫qui leggerlo di nuovo.
‫Teniamo semplicemente l'immagine sostanzialmente in
‫memoria e poi qui possiamo leggerla, va bene?
‫Ad ogni modo, chiamando la funzione
‫sharp in questo modo qui creerai un oggetto su
‫cui possiamo concatenare più metodi per eseguire la nostra elaborazione dell'immagine.
‫E quindi il primo che faremo è ridimensionare.
‫Quindi, ridimensiona, e poi qui possiamo specificare
‫la larghezza e l'altezza.
‫Quindi diciamo 500 e 500, quindi ricorda che
‫vogliamo immagini quadrate e quindi,
‫ovviamente, l'altezza deve essere uguale
‫alla larghezza.
‫Ora questo ritaglierà l'immagine
‫in modo che copra l'intero 500 per 500 quadrati.
‫E in realtà
‫possiamo modificare questo comportamento predefinito se lo desideriamo.
‫E quindi, di nuovo, diamo una rapida
‫occhiata alla documentazione.
‫Quindi diciamo, github sharp, ma in realtà il loro sito
‫web è un po'
‫migliore, un po' più completo.
‫Quindi facciamo clic su quel collegamento qui, e quindi qui possiamo
‫arrivare al ridimensionamento, che è ciò che
‫stiamo facendo attualmente e
‫quindi ecco di cosa stavo parlando.
‫Va bene, quindi l'impostazione predefinita qui è
‫che l'immagine verrà ritagliata
‫per coprire entrambe le dimensioni fornite.
‫Ma possiamo anche scegliere contenere, riempire, dentro o fuori.
‫E lo faremmo impostando le opzioni qui.
‫Quindi possiamo impostare larghezza, altezza e quindi come terza
‫opzione, potremmo impostare questo
‫oggetto opzioni in cui possiamo quindi definire l'adattamento.
‫Potremmo anche definire la posizione, che è
‫centrale per impostazione predefinita.
‫Vedete che ci sono tutti i tipi
‫di cose che potremmo davvero definire per mettere a punto la
‫nostra elaborazione delle immagini.
‫Ma in questo caso basta quello che abbiamo.
‫Quindi passiamo al passaggio successivo.
‫Perché quello che voglio fare
‫dopo è effettivamente convertire le immagini sempre in jpeg, ok?
‫E per questo, usiamo per formattare
‫e poi jpeg.
‫Possiamo anche quindi definire la qualità di questo jpeg.
‫Quindi fondamentalmente per comprimerlo
‫un po' in modo che
‫non occupi così tanto spazio e quindi per quello,
‫usiamo il metodo jpeg e impostiamo un'opzione in questo oggetto con qualità e
‫diciamo il 90 percento qui, va bene?
‫Quindi ogni metodo nella sua riga qui
‫è molto più carino, ma in realtà non abbiamo finito.
‫Abbiamo quasi finito, ma non del tutto.
‫Perché ora, alla
‫fine, vogliamo finalmente scriverlo su un file sul nostro disco.
‫E quindi per questo, possiamo usare to file,
‫ora questo metodo qui ha
‫effettivamente bisogno dell'intero percorso del file.
‫Quindi fondamentalmente immagini
‫pubbliche, barra, utenti e infine ecco
‫il nome del file, ok?
‫Quindi prendiamolo in realtà
‫da quello che avevamo qui prima.
‫Perché, naturalmente, vogliamo che le nostre immagini
‫abbiano un formato simile.
‫Va bene, quindi copiamolo.
‫Ma in realtà non lo metterò proprio qui.
‫Invece, lo salverò effettivamente
‫per richiedere il nome del file punto file punto.
‫Ora perché lo sto facendo in questo modo?
‫Ebbene è perché in questo momento questo nome
‫di file non è definito.
‫Quindi, quando decidiamo di salvare l'immagine in memoria come buffer, il nome
‫del file non verrà realmente impostato, ma abbiamo davvero
‫bisogno di quel nome
‫di file nell'altra nostra funzione middleware, giusto?
‫Quindi questo è qui in aggiornami proprio qui.
‫Quindi ci affidiamo alla richiesta del file dot file
‫dot file name per salvare il nome del file nel nostro database, giusto?
‫E quindi, in realtà, dovremmo definirlo.
‫E così, in precedenza era ovviamente
‫definito dal caricamento multer che avevamo, ma dal
‫momento che ora non c'è più, dovremmo quindi ridefinirlo sostanzialmente qui.
‫Va bene?
‫Poi qui, effettivamente, possiamo liberarci
‫di questa parte dell'estensione, perché sappiamo
‫già che sarà sempre un jpeg.
‫Per questo motivo per formattare, ok?
‫E quindi qui, possiamo semplicemente mettere jpeg.
‫Quindi non è necessario ottenere l'estensione del file.
‫E quindi
‫ora qui, possiamo usarlo.
‫Req dot file dot file name, ed è
‫proprio così.
‫Va bene?
‫Quindi tutto ciò che dobbiamo
‫fare ora per finire è chiamare il prossimo middleware nello stack.
‫E quindi quella sarà la funzione del gestore dell'aggiornamento.
‫Quindi, ovviamente, ora proviamolo.
‫Quindi, non abbiamo più bisogno di questo.
‫Veniamo a Postman, e
‫ora l'utente che
‫voglio aggiornare si chiama arrav, credo.
‫Diamo un'occhiata qui ai nostri dati molto velocemente.
‫E quindi sì, quindi questa è l'immagine non quadrata
‫che stiamo per caricare ora e
‫in realtà qui vedi la
‫dimensione che è 1000 volte 1500, quindi confrontiamola
‫in seguito con la nostra
‫immagine caricata ridimensionata.
‫Bene.
‫Comunque, ora prendiamo il nome
‫di arrav In realtà non ci serve, sono
‫sempre gli stessi, quindi arrav come questo, quindi accediamo.
‫In modo che possiamo quindi
‫aggiornarlo e vedere che in questo momento è l'immagine qui è l'utente 11.
‫E giusto per vederlo
‫un po' meglio,
‫aggiorniamoci, accediamo effettivamente alla nostra applicazione web usando
‫quell'utente.
‫Quindi prova uno, due, tre, quattro.
‫Bene, questa è l'immagine corrente e
‫ora andiamo avanti e aggiorniamola.
‫Seleziona i file, ed ecco la
‫nostra immagine, aprilo e vediamo cosa succede.
‫E abbiamo finito.
‫In realtà è stato
‫molto veloce, quindi vediamo se è corretto.
‫Beh, almeno il nome qui sembra corretto.
‫Se diamo un'occhiata ai nostri utenti ora qui, è
‫in pubblico o proprio qui.
‫Quindi dovrebbe essere quello in realtà
‫non lo è.
‫E in realtà non si trova da nessuna parte.
‫Ricarichiamo, ah, ed
‫eccolo qui.
‫Ora, questo è quello.
‫Quindi vedi che ora è 500 per
‫500, qui è
‫molto più piccolo, quindi 55 rispetto ai 315 che avevamo prima.
‫Quindi è
‫molto meglio e, come vedrai qui, ora
‫dovrebbe essere aggiornato anche qui.
‫Ed è perfetto.
‫Quindi la faccia è proprio nel mezzo qui.
‫Quindi il ridimensionamento è stato davvero perfetto.
‫Freddo.
‫E spero che troverai
‫un uso per questo tipo di
‫elaborazione delle immagini anche nelle tue applicazioni.
‫Quindi, solo per ricapitolare rapidamente cosa abbiamo fatto qui.
‫Bene, abbiamo creato una nuova funzione middleware che
‫verrà eseguita subito dopo che la
‫foto è stata effettivamente caricata.
‫E quel caricamento ora sta effettivamente
‫accadendo su un buffer e non più direttamente sul file system.
‫Destra?
‫Ed ecco perché usiamo questa memoria
‫qui, ma ovviamente questo filtro multer qui
‫funziona ancora.
‫E quindi possiamo ancora caricare solo immagini, va bene?
‫Quindi qui in quel middleware mettiamo il nome
‫del file di quell'immagine su
‫richiesta dot file dot file name in
‫modo che possiamo quindi usarlo nell'aggiornamento.
‫Bene, e poi qui abbiamo
‫l'effettiva elaborazione dell'immagine stessa.
‫Dove l'abbiamo prima ridimensionato in un
‫quadrato e poi formattato
‫in un jpeg con una qualità del
‫90 percento, e infine abbiamo scritto quel file
‫nel nostro file system nella stessa cartella che abbiamo specificato anche prima.
‫Va bene, è così che funziona quando
‫hai bisogno di un'elaborazione
‫delle immagini, ma se non ne hai
‫bisogno, puoi continuare a usarlo in questo modo, ok?
‫E quindi è davvero importante che
‫abbiamo imparato a
‫farlo in entrambi i modi qui.
‫Bene, nel prossimo video faremo
‫funzionare effettivamente questo modulo qui in modo da
‫poter caricare le foto degli
‫utenti direttamente da qui.