Come elaborare immagini in Node.js con Sharp

L’autore ha selezionato il Fondo per la Diversità nella Tecnologia per ricevere una donazione come parte del programma Scrivi per le Donazioni.

Introduzione

Il trattamento delle immagini digitali è un metodo per utilizzare un computer per analizzare e manipolare le immagini. Il processo prevede la lettura di un’immagine, l’applicazione di metodi per alterare o migliorare l’immagine e quindi il salvataggio dell’immagine elaborata. È comune per le applicazioni che gestiscono contenuti caricati dagli utenti elaborare immagini. Ad esempio, se stai scrivendo un’applicazione web che consente agli utenti di caricare immagini, gli utenti potrebbero caricare immagini non necessariamente grandi. Ciò può influire negativamente sulla velocità di caricamento dell’applicazione e anche sprecare lo spazio del server. Con il trattamento delle immagini, la tua applicazione può ridimensionare e comprimere tutte le immagini caricate dagli utenti, il che può migliorare significativamente le prestazioni della tua applicazione e risparmiare spazio su disco del server.

Node.js ha un ecosistema di librerie che puoi utilizzare per elaborare immagini, come sharp, jimp e il modulo gm. Questo articolo si concentrerà sul modulo sharp. sharp è una libreria popolare di elaborazione delle immagini per Node.js che supporta vari formati di file immagine, come JPEG, PNG, GIF, WebP, AVIF, SVG e TIFF.

In questo tutorial, utilizzerai sharp per leggere un’immagine ed estrarre i suoi metadati, ridimensionare, cambiare formato di un’immagine e comprimere un’immagine. Successivamente ritaglierai, renderai in scala di grigi, ruoterai e sfocerai un’immagine. Infine, comporrerai immagini e aggiungerai testo su un’immagine. Alla fine di questo tutorial, avrai una buona comprensione di come elaborare immagini in Node.js.PrerequisitiPer completare questo tutorial, avrai bisogno di:

Prerequisiti

Per completare questo tutorial, avrai bisogno di:

• Node.js configurato nel tuo ambiente di sviluppo locale. Puoi seguire Come Installare Node.js e Creare un Ambiente di Sviluppo Locale per imparare come installare Node.js e npm sul tuo sistema.

• Conoscenza di base su come scrivere e far girare un programma Node.js. Puoi seguire Come Scrivere e Eseguire il Tuo Primo Programma in Node.js per imparare le basi.

• Conoscenza di base della programmazione asincrona in JavaScript. Segui Comprendere il ciclo degli eventi, i callback, le promesse e Async/Await in JavaScript per rivedere la programmazione asincrona.

Passo 1 – Configurazione della directory del progetto e download delle immagini

Prima di iniziare a scrivere il tuo codice, devi creare la directory che conterrà il codice e le immagini che utilizzerai in questo articolo.

Apri il tuo terminale e crea la directory per il progetto utilizzando il comando mkdir:

mkdir process_images

Entra nella directory appena creata utilizzando il comando cd:

cd process_images

Crea un file package.json utilizzando il comando npm init per tenere traccia delle dipendenze del progetto:

npm init -y

L’opzione -y indica a npm di creare il file package.json predefinito.

Successivo, installa sharp come dipendenza:

npm install sharp

Utilizzerai le seguenti tre immagini in questa guida:

Successivamente, scarica le immagini nella directory del tuo progetto utilizzando il comando curl.

Usa il seguente comando per scaricare la prima immagine. Questo scaricherà l’immagine come sammy.png:

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

Successivamente, scarica la seconda immagine con il seguente comando. Questo scaricherà l’immagine come underwater.png:

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

Infine, scarica la terza immagine utilizzando il seguente comando. Questo scaricherà l’immagine come sammy-transparent.png:

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

Con la directory del progetto e le dipendenze configurate, ora sei pronto per iniziare a elaborare le immagini.

Passo 2 — Leggere le immagini e restituire i metadati

In questa sezione, scriverai del codice per leggere un’immagine ed estrarne il metadati. I metadati dell’immagine sono testo incorporato in un’immagine, che include informazioni sull’immagine come il suo tipo, larghezza e altezza.

Per estrarre i metadati, prima importerai il modulo sharp, creerai un’istanza di sharp e passerà il percorso dell’immagine come argomento. Successivamente, collegherai il metodo metadata() all’istanza per estrarre i metadati e registrarli nella console.

Per fare questo, crea e apri il file readImage.js nel tuo editor di testo preferito. Questa guida utilizza un editor di testo da terminale chiamato nano:

nano readImage.js

Successivamente, richiama sharp nella parte superiore del file:

const sharp = require("sharp");

sharp è un modulo di elaborazione delle immagini basato su promesse. Quando crei un’istanza di sharp, restituisce una promessa. Puoi risolvere la promessa utilizzando il metodo then o utilizzare async/await, che ha una sintassi più pulita.

Per utilizzare la sintassi async/await, dovrai creare una funzione asincrona posizionando la parola chiave async all’inizio della funzione. Ciò ti consentirà di utilizzare la parola chiave await all’interno della funzione per risolvere la promessa restituita quando si legge un’immagine.

Nel tuo file readImage.js, definisci una funzione asincrona, getMetadata(), per leggere l’immagine, estrarne i metadati e registrarli nella console:

const sharp = require("sharp");

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

getMetadata() è una funzione asincrona grazie alla parola chiave async che hai definito prima del label function. Ciò ti consente di utilizzare la sintassi await all’interno della funzione. La funzione getMetadata() leggerà un’immagine e restituirà un oggetto con i suoi metadati.

Dentro il corpo della funzione, leggi l’immagine chiamando sharp() che accetta il percorso dell’immagine come argomento, qui con sammy.png.

Oltre ad accettare un percorso di immagine, sharp() può anche leggere i dati dell’immagine memorizzati in un Buffer, Uint8Array o Uint8ClampedArray a condizione che l’immagine sia JPEG, PNG, GIF, WebP, AVIF, SVG o TIFF.

Ora, quando usi sharp() per leggere l’immagine, crea un’istanza sharp. Quindi colleghi il metodo metadata() del modulo sharp all’istanza. Il metodo restituisce un oggetto contenente i metadati dell’immagine, che memorizzi nella variabile metadata e ne logghi il contenuto utilizzando console.log().

Il tuo programma ora può leggere un’immagine e restituirne i metadati. Tuttavia, se il programma genera un errore durante l’esecuzione, si bloccherà. Per aggirare questo problema, devi catturare gli errori quando si verificano.

Per farlo, racchiudi il codice all’interno della funzione getMetadata() all’interno di un blocco 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}`);
  }
}

All’interno del blocco try, si legge un’immagine, si estrae e si registra la sua metadati. Quando si verifica un errore durante questo processo, l’esecuzione salta alla sezione catch e registra l’errore, evitando che il programma si blocchi.

Infine, chiama la funzione getMetadata() aggiungendo la riga evidenziata:

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();

Ora, salva e esci dal file. Digita y per salvare le modifiche apportate nel file e conferma il nome del file premendo il tasto ENTER o RETURN.

Esegui il file utilizzando il comando node:

node readImage.js

Dovresti vedere una sorta di output simile a questo:

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

Ora che hai letto un’immagine ed estratto i suoi metadati, ora ridimensionerai un’immagine, ne cambierai il formato e la comprimerai.

Passo 3 – Ridimensionamento, Cambiamento del Formato dell’Immagine e Compressione delle Immagini

Il ridimensionamento è il processo di alterazione delle dimensioni di un’immagine senza tagliarne nulla, il che influisce sulle dimensioni del file dell’immagine. In questa sezione, ridimensionerai un’immagine, ne cambierai il tipo di immagine e comprimerai l’immagine. La compressione delle immagini è il processo di riduzione delle dimensioni di un file di immagine senza perdere la qualità.

Prima, concatenare il metodo resize() dall’istanza sharp per ridimensionare l’immagine e salvarla nella directory del progetto. Seconda, concatenare il metodo format() all’immagine ridimensionata per cambiare il suo formato da png a jpeg. Inoltre, passerai un’opzione al metodo format() per comprimere l’immagine e salvarla nella directory.

Crea e apri il file resizeImage.js nel tuo editor di testo:

nano resizeImage.js

Aggiungi il seguente codice per ridimensionare l’immagine a una larghezza di 150px e un’altezza di 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 funzione resizeImage() concatena il metodo resize() del modulo sharp all’istanza sharp. Il metodo prende un oggetto come argomento. Nell’oggetto, imposti le dimensioni dell’immagine desiderate utilizzando le proprietà width e height. Impostando la width su 150 e l’height su 97 renderai l’immagine larga 150px e alta 97px.

Dopo aver ridimensionato l’immagine, concateni il metodo toFile() del modulo sharp, che prende il percorso dell’immagine come argomento. Passare sammy-resized.png come argomento salverà il file dell’immagine con quel nome nella directory di lavoro del tuo programma.

Ora, salva ed esci dal file. Esegui il tuo programma nel terminale:

node resizeImage.js

Non otterrai alcun output, ma dovresti vedere un nuovo file immagine creato con il nome sammy-resized.png nella directory del progetto.

Apri l’immagine sul tuo computer locale. Dovresti vedere un’immagine di Sammy larga 150px e alta 97px:

Ora che puoi ridimensionare un’immagine, successivamente convertirai il formato dell’immagine ridimensionata da png a jpeg, comprimi l’immagine e salvala nella directory di lavoro. Per fare ciò, utilizzerai il metodo toFormat(), che concatenarai dopo il metodo resize().

Aggiungi il codice evidenziato per cambiare il formato dell’immagine in jpeg e comprimerlo:

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();

All’interno della funzione resizeImage(), utilizzi il metodo toFormat() del modulo sharp per cambiare il formato dell’immagine e comprimerlo. Il primo argomento del metodo toFormat() è una stringa contenente il formato dell’immagine in cui desideri convertire la tua immagine. Il secondo argomento è un oggetto opzionale contenente le opzioni di output che migliorano e comprimono l’immagine.

Per comprimere l’immagine, passi una proprietà mozjpeg che contiene un valore booleano. Quando lo imposti su true, sharp utilizza i valori predefiniti di mozjpeg per comprimere l’immagine senza sacrificare la qualità. L’oggetto può anche prendere più opzioni; consulta la documentazione di sharp per ulteriori dettagli.

Successivamente, passa al metodo toFile() un nome file diverso per salvare l’immagine compressa come sammy-resized-compressed.jpeg.

Ora, salva ed esci dal file, quindi esegui il tuo codice con il seguente comando:

node resizeImage.js

Non riceverai alcun output, ma un file immagine sammy-resized-compressed.jpeg verrà salvato nella directory del tuo progetto.

Apri l’immagine sul tuo computer locale e vedrai l’immagine seguente:

Con la tua immagine ora compressa, controlla la dimensione del file per confermare che la compressione sia riuscita. Nel tuo terminale, esegui il comando du per verificare la dimensione del file di sammy.png:

du -h sammy.png

l’opzione -h produce un output leggibile dall’utente che ti mostra la dimensione del file in kilobytes, megabyte e molto altro ancora.

Dopo aver eseguito il comando, dovresti vedere un output simile a questo:

Output
120K    sammy.png

L’output mostra che l’immagine originale è di 120 kilobyte.

Successivamente, controlla la dimensione del file per sammy-resized.png:

du -h sammy-resized.png

Dopo aver eseguito il comando, vedrai il seguente output:

Output
8.0K     sammy-resized.png

Il file sammy-resized.png è di 8 kilobyte rispetto a prima che fosse di 120 kilobyte. Questo mostra che l’operazione di ridimensionamento influisce sulle dimensioni del file.

Ora, controlla le dimensioni del file per sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

Dopo aver eseguito il comando, vedrai il seguente output:

Output
4.0K    sammy-resized-compressed.jpeg

Il sammy-resized-compressed.jpeg è ora di 4 kilobyte rispetto a prima che fosse di 8 kilobyte, risparmiando 4 kilobyte, mostrando che la compressione ha funzionato.

Ora che hai ridimensionato un’immagine, ne hai cambiato il formato e l’hai compressa, cropperai e renderai in scala di grigi l’immagine.

Passaggio 4 — Ritaglio e Conversione delle Immagini in Scala di Grigi

In questo passaggio, ritaglierai un’immagine e la convertirai in scala di grigi. Il ritaglio è il processo di rimozione di aree indesiderate da un’immagine. Utilizzerai il metodo extend() per ritagliare l’immagine sammy.png. Dopo di ciò, concatenarai il metodo grayscale() all’istanza dell’immagine ritagliata e la convertirai in scala di grigi.

Crea e apri cropImage.js nel tuo editor di testo:

nano cropImage.js

Nel tuo file cropImage.js, aggiungi il seguente codice per ritagliare l’immagine:

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 funzione cropImage() è una funzione asincrona che legge un’immagine e restituisce l’immagine ritagliata. All’interno del blocco try, un’istanza sharp leggerà l’immagine. Quindi, il metodo extract() del modulo sharp concatenato all’istanza prende un oggetto con le seguenti proprietà:

• width: la larghezza dell’area che si desidera ritagliare.
• height: l’altezza dell’area che si desidera ritagliare.
• top: la posizione verticale dell’area che si desidera ritagliare.
• left: la posizione orizzontale dell’area che si desidera ritagliare.

Quando si imposta la width a 500 e l’height a 330, immagina che sharp crei una scatola trasparente sopra l’immagine che si desidera ritagliare. Qualsiasi parte dell’immagine che si adatta alla scatola rimarrà, e il resto verrà tagliato:

Le proprietà top e left controllano la posizione della scatola. Quando si imposta left a 120, la scatola viene posizionata a 120px dal bordo sinistro dell’immagine, e impostando top a 70 si posiziona la scatola a 70px dal bordo superiore dell’immagine.

L’area dell’immagine che si adatta alla scatola verrà estratta e salvata in sammy-cropped.png come un’immagine separata.

Salva ed esci dal file. Esegui il programma nel terminale:

node cropImage.js

L’output non verrà mostrato ma l’immagine sammy-cropped.png verrà salvata nella directory del progetto.

Apri l’immagine sul tuo computer locale. Dovresti vedere l’immagine ritagliata:

Ora che hai ritagliato un’immagine, la convertirai in scala di grigi. Per fare ciò, concatenare il metodo grayscale all’istanza sharp. Aggiungi il codice evidenziato per convertire l’immagine in scala di grigi:

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 funzione cropImage() converte l’immagine ritagliata in scala di grigi concatenando il metodo grayscale() del modulo sharp all’istanza sharp. Quindi salva l’immagine nella directory del progetto come sammy-cropped-grayscale.png.

Premi CTRL+X per salvare ed uscire dal file.

Esegui il tuo codice nel terminale:

node cropImage.js

Apri sammy-cropped-grayscale.png sul tuo computer locale. Ora dovresti vedere l’immagine in scala di grigi:

Ora che hai ritagliato ed estratto l’immagine, lavorerai sulla rotazione e lo sfocatura.

Passaggio 5 — Rotazione e Sfocatura Immagini

In questo passaggio, ruoterai l’immagine sammy.png di 33 gradi. Applicherai anche uno sfocatura gaussiana sull’immagine ruotata. Uno sfocatura gaussiana è una tecnica di sfocatura di un’immagine utilizzando la funzione gaussiana, che riduce il livello di rumore e i dettagli su un’immagine.

Crea un file rotateImage.js nel tuo editor di testo:

nano rotateImage.js

Nel tuo file rotateImage.js, scrivi il seguente blocco di codice per creare una funzione che ruoti sammy.png di un angolo di 33 gradi:

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 funzione rotateImage() è una funzione asincrona che legge un’immagine e restituirà l’immagine ruotata di 33 gradi. All’interno della funzione, il metodo rotate() del modulo sharp richiede due argomenti. Il primo argomento è l’angolo di rotazione di 33 gradi. Per impostazione predefinita, sharp rende lo sfondo dell’immagine ruotata nero. Per rimuovere lo sfondo nero, passi un oggetto come secondo argomento per rendere lo sfondo trasparente.

L’oggetto ha una proprietà background che contiene un oggetto che definisce il modello di colore RGBA. RGBA sta per rosso, verde, blu e alfa.

• r: controlla l’intensità del colore rosso. Accetta un valore intero da 0 a 255. 0 significa che il colore non viene utilizzato e 255 è il rosso al massimo.

• g: controlla l’intensità del colore verde. Accetta un valore intero da 0 a 255. 0 significa che il colore verde non è utilizzato e 255 è il verde al massimo.

• b: controlla l’intensità del blu. Accetta anche un valore intero compreso tra 0 e 255. 0 significa che il colore blu non viene utilizzato e 255 è il blu al massimo.

• alpha: controlla l’opacità del colore definito dalle proprietà r, g e b. 0 o 0.0 rende il colore trasparente e 1 o 1.1 rende il colore opaco.

Perché la proprietà alpha funzioni, devi assicurarti di definire e impostare i valori per r, g e b. Impostando i valori di r, g e b a 0 si crea un colore nero. Per creare uno sfondo trasparente, devi prima definire un colore, quindi puoi impostare alpha a 0 per renderlo trasparente.

Ora, salva ed esci dal file. Esegui il tuo script nel terminale:

node rotateImage.js

Controlla l’esistenza di sammy-rotated.png nella directory del tuo progetto. Aprilo sul tuo computer locale.

Dovresti vedere l’immagine ruotata ad un angolo di 33 gradi:

Successivamente, sfocerai l’immagine ruotata. Lo farai concatenando il metodo blur() all’istanza sharp.

Inserisci il codice evidenziato di seguito per sfocare l’immagine:

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 funzione rotateImage() ora legge l’immagine, la ruota e applica una sfocatura gaussiana all’immagine. Applica una sfocatura gaussiana all’immagine utilizzando il metodo blur() del modulo sharp. Il metodo accetta un singolo argomento contenente un valore sigma tra 0.3 e 1000. Passare 4 applicherà una sfocatura gaussiana con un valore sigma di 4. Dopo che l’immagine è sfocata, si definisce un percorso per salvare l’immagine sfocata.

Lo script ora sfoca l’immagine ruotata con un valore sigma di 4. Salva ed esci dal file, quindi esegui lo script nel terminale:

node rotateImage.js

Dopo aver eseguito lo script, apri il file sammy-rotated-blurred.png sul tuo computer locale. Ora dovresti vedere l’immagine ruotata sfocata:

Ora che hai ruotato e sfocato un’immagine, componi un’immagine su un’altra.

Passaggio 6 — Composizione Immagini Utilizzando composite()

La composizione di immagini è un processo che consiste nel combinare due o più immagini separate per creare un’unica immagine. Questo viene fatto per creare effetti che prendono i migliori elementi dalle diverse foto. Un altro caso d’uso comune è quello di aggiungere un watermark a un’immagine con un logo.

In questa sezione, sovrapporrai sammy-transparent.png sopra underwater.png. Questo creerà l’illusione di Sammy che nuota in profondità nell’oceano. Per comporre le immagini, concateni il metodo composite() all’istanza sharp.

Crea e apri il file compositeImage.js nel tuo editor di testo:

nano compositeImages.js

Ora, crea una funzione per comporre le due immagini aggiungendo il seguente codice nel file 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 funzione compositeImages() legge prima l’immagine underwater.png. Successivamente, concateni il metodo composite() del modulo sharp, che prende un array come argomento. L’array contiene un singolo oggetto che legge l’immagine sammy-transparent.png. L’oggetto ha le seguenti proprietà:

• input: prende il percorso dell’immagine che desideri sovrapporre sull’immagine elaborata. Accetta anche un Buffer, un Uint8Array, o un Uint8ClampedArray come input.
• top: controlla la posizione verticale dell’immagine che desideri sovrapporre. Impostando top su 50 sposta l’immagine sammy-transparent.png di 50px dal margine superiore dell’immagine underwater.png.
• left: controlla la posizione orizzontale dell’immagine che si desidera sovrapporre su un’altra. Impostare left su 50 sposta l’immagine sammy-transparent.png di 50px dal bordo sinistro dell’immagine underwater.png.

Il metodo composite() richiede un’immagine di dimensioni simili o inferiori rispetto all’immagine elaborata.

Per visualizzare cosa fa il metodo composite(), pensa che stia creando uno stack di immagini. L’immagine sammy-transparent.png è posizionata sopra l’immagine underwater.png:

I valori top e left posizionano l’immagine sammy-transparent.png rispetto all’immagine underwater.png.

Salva lo script ed esci dal file. Esegui lo script per creare una composizione di immagini:

node compositeImages.js

Apri sammy-underwater.png sul tuo computer locale. Ora dovresti vedere l’immagine sammy-transparent.png sovrapposta all’immagine underwater.png:

Ora hai composto le immagini usando il metodo composite(). Nel prossimo passaggio, utilizzerai il metodo composite() per aggiungere del testo a un’immagine.

Passaggio 7 — Aggiunta di Testo su un’Immagine

In questo passaggio, scriverai del testo su un’immagine. Al momento della scrittura, sharp non ha un modo nativo per aggiungere testo a un’immagine. Per aggiungere del testo, prima scriverai del codice per disegnare del testo utilizzando Scalable Vector Graphics (SVG). Una volta creato l’immagine SVG, scriverai del codice per sovrapporre l’immagine con l’immagine sammy.png utilizzando il metodo composite.

SVG è un linguaggio di markup basato su XML per la creazione di grafica vettoriale per il web. È possibile disegnare testo, o forme come cerchi, triangoli, nonché disegnare forme complesse come illustrazioni, loghi, ecc. Le forme complesse vengono create con uno strumento grafico come Inkscape che genera il codice SVG. Le forme SVG possono essere renderizzate e ridimensionate a qualsiasi dimensione senza perdita di qualità.

Crea e apri il file addTextOnImage.js nel tuo editor di testo.

nano addTextOnImage.js

Nel tuo file addTextOnImage.js, aggiungi il seguente codice per creare un contenitore 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 funzione addTextOnImage() definisce quattro variabili: width, height, text, e svgImage. width contiene l’intero 750, e height contiene l’intero 483. text contiene la stringa Sammy the Shark. Questo è il testo che disegnerai utilizzando SVG.

La variabile svgImage contiene l’elemento svg. L’elemento svg ha due attributi: width e height che interpolano le variabili width e height che hai definito in precedenza. L’elemento svg crea un contenitore trasparente in base alla larghezza e all’altezza fornite.

Hai dato all’elemento svg una width di 750 e un’altezza di 483 in modo che l’immagine SVG abbia le stesse dimensioni di sammy.png. Questo aiuterà a centrare il testo sull’immagine sammy.png.

Successivamente, disegnerai i grafici del testo. Aggiungi il codice evidenziato per disegnare Sammy the Shark sul contenitore 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’elemento text SVG ha quattro attributi: x, y, text-anchor e class. x e y definiscono la posizione del testo che stai disegnando sul contenitore SVG. L’attributo x posiziona il testo orizzontalmente e l’attributo y posiziona il testo verticalmente.

Impostando x su 50% disegna il testo al centro del contenitore sull’asse x e impostando y su 50% posiziona il testo al centro sull’asse y dell’immagine SVG.

Il text-anchor allinea il testo orizzontalmente. Impostando text-anchor su middle allinerà il testo al centro sulle coordinate x specificate.

La classe definisce un nome di classe sull’elemento testo. Utilizzerai il nome di classe per applicare stili CSS all’elemento testo.

${text} interpola la stringa Sammy the Shark memorizzata nella variabile testo. Questo è il testo che verrà disegnato sull’immagine SVG.

Successivamente, aggiungi il codice evidenziato per stilizzare il testo usando 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>
    `;

In questo codice, fill cambia il colore del testo in nero, font-size cambia la dimensione del carattere e font-weight cambia lo spessore del carattere.

A questo punto, hai scritto il codice necessario per disegnare il testo Sammy the Shark con SVG. Successivamente, salverai l’immagine SVG come un png con sharp in modo da poter vedere come SVG sta disegnando il testo. Una volta fatto ciò, componi l’immagine SVG con sammy.png.

Aggiungi il codice evidenziato per salvare l’immagine SVG come un png con 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() crea un oggetto Buffer dall’immagine SVG. Un buffer è uno spazio temporaneo in memoria che memorizza dati binari.

Dopo aver creato l’oggetto buffer, crei un’istanza sharp con l’oggetto buffer come input. Oltre a un percorso dell’immagine, sharp accetta anche un buffer, Uint9Array, o Uint8ClampedArray.

Infine, salvi l’immagine SVG nella directory del progetto come svg-image.png.

Ecco il codice completo:

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()

Salva ed esci dal file, quindi esegui lo script con il seguente comando:

node addTextOnImage.js

sudo apt update
sudo apt install fontconfig

Apri svg-image.png sul tuo computer locale. Adesso dovresti vedere il testo Sammy the Shark renderizzato con uno sfondo trasparente:

Ora che hai confermato che il codice SVG disegna il testo, comporrà le grafiche del testo sul file sammy.png.

Aggiungi il seguente codice evidenziato per comporre l’immagine delle grafiche del testo SVG sull’immagine 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();

Il metodo composite() legge l’immagine SVG dal variabile svgBuffer e la posiziona 0 pixel dall’alto e 0 pixel dall’orizzontale del bordo sinistro di sammy.png. Successivamente, salvi l’immagine composta come sammy-text-overlay.png.

Salva e chiudi il tuo file, quindi esegui il tuo programma utilizzando il seguente comando:

node addTextOnImage.js

Apri sammy-text-overlay.png sul tuo computer locale. Dovresti vedere il testo aggiunto sopra l’immagine:

Hai ora utilizzato il metodo composite() per aggiungere il testo creato con SVG su un’altra immagine.

Conclusione

In questo articolo, hai imparato come utilizzare metodi efficaci per elaborare le immagini in Node.js. Inizialmente, hai creato un’istanza per leggere un’immagine e hai usato il metodo metadata() per estrarre i metadati dell’immagine. Successivamente, hai utilizzato il metodo resize() per ridimensionare un’immagine. In seguito, hai usato il metodo format() per cambiare il tipo di immagine e comprimerla. Dopodiché, hai proceduto ad utilizzare vari metodi di sharp per ritagliare, convertire in scala di grigi, ruotare e sfocare un’immagine. Infine, hai usato il metodo composite() per comporre un’immagine e aggiungere testo su un’immagine.

Per ulteriori approfondimenti sui metodi di sharp aggiuntivi, visita la documentazione di sharp. Se desideri continuare a imparare Node.js, consulta la serie Come Codificare in Node.js.