Hoe Afbeeldingen te Verwerken in Node.js met Sharp

De auteur heeft het Diversity in Tech Fund geselecteerd om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.

Introductie

Digitale beeldverwerking is een methode om een computer te gebruiken voor het analyseren en manipuleren van afbeeldingen. Het proces omvat het lezen van een afbeelding, het toepassen van methoden om de afbeelding te wijzigen of te verbeteren, en vervolgens het opslaan van de verwerkte afbeelding. Het is gebruikelijk voor toepassingen die gebruikersgeüploade inhoud verwerken om afbeeldingen te verwerken. Als je bijvoorbeeld een webtoepassing schrijft die gebruikers in staat stelt afbeeldingen te uploaden, kunnen gebruikers onnodig grote afbeeldingen uploaden. Dit kan een negatieve invloed hebben op de laadsnelheid van de toepassing en ook de ruimte op je server verspillen. Met beeldverwerking kan je toepassing alle door gebruikers geüploade afbeeldingen herschalen en comprimeren, wat de prestaties van je toepassing aanzienlijk kan verbeteren en ruimte op je server kan besparen.

Node.js heeft een ecosysteem van bibliotheken die je kunt gebruiken om afbeeldingen te verwerken, zoals sharp, jimp en gm-module. Dit artikel zal zich richten op de sharp-module. Sharp is een populaire Node.js-beeldverwerkingsbibliotheek die verschillende beeldbestandsindelingen ondersteunt, zoals JPEG, PNG, GIF, WebP, AVIF, SVG en TIFF.

In deze tutorial zul je sharp gebruiken om een afbeelding te lezen en de metagegevens ervan te extraheren, de grootte te wijzigen, de indeling van een afbeelding te wijzigen en een afbeelding te comprimeren. Vervolgens zul je een afbeelding bijsnijden, grijswaarden geven, roteren en vervagen. Tenslotte zul je afbeeldingen samenvoegen en tekst aan een afbeelding toevoegen. Tegen het einde van deze tutorial zul je een goed begrip hebben van hoe je afbeeldingen kunt verwerken in Node.js.VereistenOm deze tutorial te voltooien, heb je nodig:

Vereisten

Om deze tutorial te voltooien, heb je nodig:

• Node.js geïnstalleerd in je lokale ontwikkelomgeving. Je kunt Hoe Node.js te installeren en een lokale ontwikkelomgeving te creëren volgen om te leren hoe je Node.js en npm op je systeem kunt installeren.

• Basis kennis over het schrijven enuitvoeren van een Node.js-programma. Je kunt Hoe een programma te schrijven enuit te voeren in Node.js volgen om de basisbeginselen te leren.

• Basisbegrip van asynchroon programmeren in JavaScript. Volg Begrijpen van de Event Loop, Callbacks, Promises en Async/Await in JavaScript om asynchroon programmeren te herzien.

Stap1 – Het projectdirectory instellen en afbeeldingen downloaden

Voordat je met het schrijven van je code begint, moet je de directory aanmaken die de code en de afbeeldingen bevat die je in dit artikel gaat gebruiken.

Open je terminal en maak de directory voor het project aan met de mkdir opdracht:

mkdir process_images

Ga naar de zojuist aangemaakte directory met de cd opdracht:

cd process_images

Maak een package.json bestand aan met de npm init opdracht om de projectafhankelijkheden bij te houden:

npm init -y

De -y optie vertelt npm om het standaard package.json bestand aan te maken.

Volgende, installeer sharp als een afhankelijkheid:

npm install sharp

Je zult de volgende drie afbeeldingen gebruiken in deze tutorial:

Vervolgens, download de afbeeldingen in je projectdirectory met behulp van de curl command.

Gebruik de volgende commando om de eerste afbeeldings te downloaden. Dit zal de afbeelding downloaden als sammy.png:

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

Vervolgens, download de tweede afbeelding met het volgende commando. Dit zal de afbeelding downloaden als underwater.png:

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

Tot slot, download de derde afbeelding met behulp van het volgende commando. Dit zal de afbeelding downloaden als sammy-transparent.png:

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

Met de projectdirectory en de afhankelijkheden ingesteld, ben je nu klaar om te beginnen met het verwerken van afbeeldingen.

Stap2— Afbeeldingen lezen en metadatauitvoeren

In deze sectie, zul je code schrijven om een afbeelding te lezen en zijn metadata te extraheren. Afbeeldingsmetadata is tekst ingebed in een afbeelding, die informatie bevat over de afbeelding zoals zijn type, breedte en hoogte.

Om de metadata te extraheren, zul je eerst de sharp module importeren, een instantie van sharp maken, en het afbeeldingspad als argument doorgeven. Daarna, zul je de metadata() methode aan de instantie koppelen om de metadata te extraheren en deze in de console te loggen.

Om dit te doen, maak en open het bestand readImage.js in je favoriete teksteditor. Deze tutorial gebruikt een terminalteksteditor genaamd nano:

nano readImage.js

Vervolgens vereist u sharp aan de top van het bestand:

const sharp = require("sharp");

sharp is een promise-gebaseerde afbeeldingverwerkingsmodule. Wanneer u een sharp instantie maakt, wordt er een belofte teruggegeven. U kunt de belofte oplossen met behulp van de then methode of gebruik async/await, wat een schonere syntaxis heeft.

Om de async/await syntaxis te gebruiken, moet u een asynchrone functie maken door het async sleutelwoord aan het begin van de functie te plaatsen. Dit stelt u in staat om het await sleutelwoord binnen de functie te gebruiken om de belofte op te lossen die wordt teruggegeven wanneer u een afbeelding leest.

In uw readImage.js bestand, definieer een asynchrone functie, getMetadata(), om de afbeelding te lezen, de metadata ervan te extraheren en deze in de console te loggen:

const sharp = require("sharp");

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

getMetadata() is een asynchrone functie dankzij het async sleutelwoord dat u hebt gedefinieerd vóór het function label. Dit stelt u in staat om de await syntaxis binnen de functie te gebruiken. De getMetadata() functie zal een afbeelding lezen en een object met de metadata ervan teruggeven.

Binnen het functie lichaam lees je de afbeelding door middel van het aanroepen van sharp() die het afbeeldingspad als argument neemt, hier met sammy.png.

Naast het nemen van een afbeeldingspad, kan sharp() ook afbeeldingsgegevens lezen die zijn opgeslagen in een Buffer, Uint8Array of Uint8ClampedArray, mits de afbeelding JPEG, PNG, GIF, WebP, AVIF, SVG of TIFF is.

Nu, wanneer je sharp() gebruikt om de afbeelding te lezen, creëert het een sharp instantie. Je sluit vervolgens de metadata() methode van het sharp-module aan op de instantie. De methode retourneert een object met de afbeeldingsmetadata, die je opslaat in de metadata variabele en logt de inhoud ervan met behulp van console.log().

Je programma kan nu een afbeelding lezen en haar metadata teruggeven. Echter, als het programma een fout tijdens uitvoering werpt, zal het crashen. Om hieromheen te komen, moet je de fouten opvangen wanneer ze optreden.

Om dat te doen, wikkel je de code binnen de getMetadata() functie in een try...catch blok:

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}`);
  }
}

Binnen het try blok, lees je een afbeelding, haal je de metadata ervan en log je deze. Als er een fout optreedt tijdens dit proces, gaat de uitvoering naar het catch gedeelte en wordt de fout vastgelegd, waardoor het programma niet crasht.

Tenslotte, roep de getMetadata() functie aan door de gemarkeerde regel toe te voegen:

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

Sla nu het bestand op en sluit het. Voer y in om de wijzigingen die je in het bestand hebt aangebracht op te slaan, en bevestig de bestandsnaam door op de ENTER of RETURN toets te drukken.

Voer het bestand uit met de node opdracht:

node readImage.js

Je zou een uitvoer moeten zien die op deze lijkt:

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

Nu je een afbeelding hebt gelezen en de metadata ervan hebt geëxtraheerd, ga je nu een afbeelding verkleinen, de indeling ervan wijzigen en deze comprimeren.

Stap 3 – Verkleinen, Wijzigen van afbeeldingsindeling en Comprimeren van afbeeldingen

Verkleinen is het proces van het wijzigen van de afbeeldingsdimensies zonder iets eraf te snijden, wat de afbeeldingsbestandsgrootte beïnvloedt. In deze sectie ga je een afbeelding verkleinen, de indeling ervan wijzigen en de afbeelding comprimeren. Afbeeldingscompressie is het proces van het verkleinen van een afbeeldingsbestandsgrootte zonder kwaliteitsverlies.

Eerst keten je de resize()-methode van de sharp-instantie om het beeld te verkleinen en het op te slaan in de projectmap. Ten tweede keten je de format()-methode aan het verkleinde beeld om het formaat te wijzigen van png naar jpeg. Daarnaast geef je een optie door aan de format()-methode om het beeld te comprimeren en op te slaan in de map.

Maak een bestand resizeImage.js aan in je teksteditor:

nano resizeImage.js

Voeg de volgende code toe om het beeld te verkleinen naar een breedte van 150px en een hoogte van 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();

De resizeImage()-functie ketent de resize()-methode van de sharp-module aan de sharp-instantie. De methode neemt een object als argument. In het object stel je de gewenste beeldafmetingen in met behulp van de width– en height-eigenschap. Door de width in te stellen op 150 en de height op 97 wordt het beeld 150px breed en 97px hoog.

Nadat het beeld is verkleind, keten je de toFile()-methode van de sharp-module, die het beeldpad als argument neemt. Door sammy-resized.png door te geven als argument, wordt het beeldbestand met die naam opgeslagen in de werkmap van je programma.

Sla nu het bestand op en sluit het af. Voer je programma uit in de terminal:

node resizeImage.js

Je krijgt geen uitvoer, maar je zou een nieuw beeldbestand moeten zien met de naam sammy-resized.png in de projectmap.

Open de afbeelding op je lokale machine. Je zou een afbeelding van Sammy moeten zien, 150px breed en 97px hoog:

Nu je een afbeelding kunt verkleinen, zul je de geconverteerde afbeeldingsindeling wijzigen van png naar jpeg, de afbeelding comprimeren en deze opslaan in de werkmap. Om dat te doen, zul je de toFormat()-methode gebruiken, die je zult koppelen na de resize()-methode.

Voeg de gemarkeerde code toe om de afbeeldingsindeling te wijzigen naar jpeg en comprimeer deze:

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

Binnen de functie resizeImage(), gebruik je de toFormat()-methode van de sharp-module om de afbeeldingsindeling te wijzigen en deze te comprimeren. Het eerste argument van de toFormat()-methode is een string die de afbeeldingsindeling bevat waarnaar je de afbeelding wilt converteren. Het tweede argument is een optioneel object met uitvoeropties die de afbeelding verbeteren en comprimeren.

Om de afbeelding te comprimeren, geef je het een mozjpeg-eigenschap die een booleaanse waarde bevat. Wanneer je het instelt op true, gebruikt sharp mozjpeg standaard om de afbeelding te comprimeren zonder kwaliteit te verliezen. Het object kan ook meer opties bevatten; zie de sharp documentatie voor meer details.

Vervolgens geef je de toFile() methode een andere bestandsnaam om het gecomprimeerde beeld op te slaan als sammy-resized-compressed.jpeg.

Sla nu het bestand op en sluit het af, voer vervolgens je code uit met de volgende opdracht:

node resizeImage.js

Je ontvangt geen uitvoer, maar een beeldbestand sammy-resized-compressed.jpeg wordt opgeslagen in je projectdirectory.

Open het beeld op je lokale machine en je zult het volgende beeld zien:

Met je beeld nu gecomprimeerd, controleer je de bestandsgrootte om te bevestigen dat je compressie succesvol is. Voer in je terminal het du commando uit om de bestandsgrootte voor sammy.png te controleren:

du -h sammy.png

De -h optie produceert een leesbare uitvoer waarbij je de bestandsgrootte ziet in kilobytes, megabytes en nog veel meer.

Na het uitvoeren van het commando, zou je een uitvoer moeten zien die vergelijkbaar is met deze:

Output
120K    sammy.png

De uitvoer toont aan dat het originele beeld 120 kilobytes is.

Vervolgens controleer je de bestandsgrootte voor sammy-resized.png:

du -h sammy-resized.png

Na het uitvoeren van het commando, zie je de volgende uitvoer:

Output
8.0K     sammy-resized.png

sammy-resized.png is 8 kilobytes kleiner dan 120 kilobytes. Dit toont aan dat de verkleining van invloed is op de bestandsgrootte.

Controleer nu de bestandsgrootte voor sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

Na het uitvoeren van het commando, zie je de volgende uitvoer:

Output
4.0K    sammy-resized-compressed.jpeg

De sammy-resized-compressed.jpeg is nu 4 kilobytes kleiner dan 8 kilobytes, wat je 4 kilobytes bespaart, wat aangeeft dat de compressie heeft gewerkt.

Nu je een afbeelding hebt verkleind, het formaat hebt gewijzigd en gecomprimeerd, ga je de afbeelding bijsnijden en grijswaarden geven.

Stap 4 — Afbeeldingen bijsnijden en converteren naar grijswaarden

In deze stap ga je een afbeelding bijsnijden en converteren naar grijswaarden. Bijsnijden is het proces van het verwijderen van ongewenste gebieden uit een afbeelding. Je zult de extend() methode gebruiken om de sammy.png afbeelding bij te snijden. Daarna zal je de grayscale() methode aan de bijgesneden afbeeldingsinstantie koppelen en deze converteren naar grijswaarden.

Maak en open cropImage.js in je teksteditor:

nano cropImage.js

Voeg in je cropImage.js bestand de volgende code toe om de afbeelding bij te snijden:

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

De functie cropImage() is een asynchrone functie die een afbeelding leest en jouw afbeelding bijgesneden retourneert. Binnen het try-blok leest een instantie van sharp de afbeelding. Vervolgens neemt de extract()-methode van de sharp-module geketend aan de instantie een object met de volgende eigenschappen:

• width: de breedte van het gebied dat je wilt bijsnijden.
• height: de hoogte van het gebied dat je wilt bijsnijden.
• top: de verticale positie van het gebied dat je wilt bijsnijden.
• left: de horizontale positie van het gebied dat je wilt bijsnijden.

Wanneer je de width op 500 en de height op 330 instelt, stel je je voor dat sharp een transparante doos bovenop de afbeelding creëert die je wilt bijsnijden. Elk deel van de afbeelding dat in de doos past, zal behouden blijven, en de rest zal worden afgesneden:

De eigenschappen top en left controleren de positie van de doos. Wanneer je left op 120 instelt, wordt de doos gepositioneerd op 120px van de linkerkant van de afbeelding, en door top op 70 in te stellen, wordt de doos gepositioneerd op 70px van de bovenkant van de afbeelding.

Het gebied van de afbeelding dat binnen de doos past, wordt uitgesneden en opgeslagen als een aparte afbeelding met de naam sammy-cropped.png.

Sla het bestand op en sluit het. Voer het programma uit in de terminal:

node cropImage.js

De uitvoer wordt niet weergegeven, maar de afbeelding sammy-cropped.png wordt opgeslagen in je projectdirectory.

Open de afbeelding op je lokale machine. Je zou de bijgesneden afbeelding moeten zien:

Nu je een afbeelding hebt bijgesneden, zul je de afbeelding converteren naar grijstinten. Voeg de gemarkeerde code toe om de afbeelding naar grijstinten om te zetten:

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

De cropImage() functie zet de bijgesneden afbeelding om naar grijstinten door de grayscale() methode van de sharp module te koppelen aan de sharp instantie. Vervolgens wordt de afbeelding opgeslagen in de projectdirectory als sammy-cropped-grayscale.png.

Druk op CTRL+X om op te slaan en het bestand te verlaten.

Voer je code uit in de terminal:

node cropImage.js

Open sammy-cropped-grayscale.png op je lokale machine. Je zou nu de afbeelding in grijstinten moeten zien:

Nu je de afbeelding hebt bijgesneden en geëxtraheerd, ga je werken met het roteren en vervagen ervan.

Stap 5 — Afbeeldingen roteren en vervagen

In deze stap ga je de afbeelding sammy.png roteren onder een hoek van 33 graden. Je past ook een gaussische vervaging toe op de geroteerde afbeelding. Een gaussische vervaging is een techniek om een afbeelding te vervagen met behulp van de Gaussische functie, die het ruisniveau en de details op een afbeelding vermindert.

Maak een bestand rotateImage.js aan in je teksteditor:

nano rotateImage.js

In uw rotateImage.js bestand, schrijf de volgende codeblok om een functie te creëren die sammy.png roteert naar een hoek van 33 graden:

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

De rotateImage() functie is een asynchrone functie die een afbeelding leest en de afbeelding geroteerd teruggeeft naar een hoek van 33 graden. Binnen de functie neemt de rotate() methode van de sharp module twee argumenten. Het eerste argument is de rotatiehoek van 33 graden. Standaard maakt sharp de achtergrond van de geroteerde afbeelding zwart. Om de zwarte achtergrond te verwijderen, geef je een object door als tweede argument om de achtergrond transparant te maken.

Het object heeft een background eigenschap die een object bevat dat het RGBA kleurmodel definieert. RGBA staat voor rood, groen, blauw en alpha.

• r: regelt de intensiteit van de rode kleur. Het accepteert een geheel getalwaarde van 0 tot 255. 0 betekent dat de kleur niet wordt gebruikt, en 255 is rood op zijn hoogst.

• g: regelt de intensiteit van de groene kleur. Het accepteert een geheel getalwaarde van 0-255. 0 betekent dat de kleur groen niet wordt gebruikt, en 255 is groen op zijn hoogst.

• b: regelt de intensiteit van blauw. Het accepteert ook een geheel getalwaarde tussen 0 en 255. 0 betekent dat de blauwe kleur niet wordt gebruikt, en 255 is blauw op zijn hoogst.

• alpha: regelt de dekking van de kleur gedefinieerd door de eigenschappen r, g en b. 0 of 0.0 maakt de kleur transparant en 1 of 1.1 maakt de kleur ondoorzichtig.

Om de alpha-eigenschap te laten werken, moet u ervoor zorgen dat u de waarden voor r, g en b definieert en instelt. Door de r, g en b-waarden in te stellen op 0 wordt een zwarte kleur gecreëerd. Om een transparante achtergrond te maken, moet u eerst een kleur definiëren en vervolgens kunt u alpha instellen op 0 om het transparant te maken.

Sla nu op en sluit het bestand af. Voer uw script uit in de terminal:

node rotateImage.js

Controleer of sammy-rotated.png bestaat in uw projectdirectory. Open het op uw lokale machine.

U zou de afbeelding geroteerd moeten zien worden tot een hoek van 33 graden:

Vervolgens zult u de geroteerde afbeelding vervagen. U zult dat bereiken door de blur()-methode te koppelen aan de instantie sharp.

Voer de gemarkeerde code hieronder in om de afbeelding te vervagen:

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

De rotateImage() functie leest nu de afbeelding, roteert deze en past een gaussische vervaging toe op de afbeelding. Het past een gaussische vervaging toe op de afbeelding met behulp van de blur() methode van de sharp module. De methode accepteert een enkel argument met een sigma-waarde tussen 0.3 en 1000. Door het 4 mee te geven wordt een gaussische vervaging toegepast met een sigma-waarde van 4. Nadat de afbeelding is vervaagd, definieer je een pad om de vervaagde afbeelding op te slaan.

Je script zal nu de geroteerde afbeelding vervagen met een sigma-waarde van 4. Sla het bestand op en sluit het, en voer vervolgens het script uit in je terminal:

node rotateImage.js

Na het uitvoeren van het script, open het bestand sammy-rotated-blurred.png op je lokale machine. Je zou nu de geroteerde afbeelding vervaagd moeten zien:

Nu je een afbeelding hebt geroteerd en vervaagd, ga je een afbeelding over een andere samenstellen.

Stap 6 — Samenstellen van afbeeldingen met composite()

Afbeeldingssamenstelling is een proces waarbij twee of meer aparte afbeeldingen worden gecombineerd om een enkele afbeelding te creëren. Dit wordt gedaan om effecten te creëren die de beste elementen van de verschillende foto’s benutten. Een ander veelvoorkomend gebruik is het plaatsen van een watermerk op een afbeelding met een logo.

In deze sectie zul je sammy-transparent.png samenvoegen met underwater.png. Dit zal de illusie creëren dat Sammy diep in de oceaan zwemt. Om de afbeeldingen samen te voegen, zul je de composite()-methode aan de sharp-instantie koppelen.

Maak het bestand compositeImage.js aan in je teksteditor en open het:

nano compositeImages.js

Maak nu een functie aan om de twee afbeeldingen samen te voegen door de volgende code toe te voegen in het bestand 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()

De functie compositeImages() leest eerst de afbeelding underwater.png. Vervolgens koppel je de composite()-methode van de sharp-module, die een array als argument gebruikt. De array bevat een enkel object dat de afbeelding sammy-transparent.png leest. Het object heeft de volgende eigenschappen:

• input: bevat het pad van de afbeelding die je wilt samenvoegen met de verwerkte afbeelding. Het accepteert ook een Buffer, Uint8Array of Uint8ClampedArray als invoer.
• top: regelt de verticale positie van de afbeelding die je wilt samenvoegen. Door top in te stellen op 50 wordt de afbeelding sammy-transparent.png 50px verplaatst vanaf de bovenrand van de afbeelding underwater.png.
• left: regelt de horizontale positie van de afbeelding die je wilt samenvoegen met een andere. Door left in te stellen op 50 wordt de sammy-transparent.png 50px vanaf de linkerrand van de afbeelding underwater.png verschoven.

De composite()-methode vereist een afbeelding van vergelijkbare grootte of kleiner dan de verwerkte afbeelding.

Om te visualiseren wat de composite()-methode doet, denk eraan alsof het een stapel afbeeldingen creëert. De afbeelding sammy-transparent.png wordt bovenop de afbeelding underwater.png geplaatst:

De waarden top en left positioneren de afbeelding sammy-transparent.png relatief aan de afbeelding underwater.png.

Sla je script op en verlaat het bestand. Voer je script uit om een afbeeldingssamenstelling te maken:

node compositeImages.js

Open sammy-underwater.png op je lokale machine. Je zou nu de sammy-transparent.png samengevoegd over de afbeelding underwater.png moeten zien:

Je hebt nu afbeeldingen samengevoegd met behulp van de composite()-methode. In de volgende stap zul je de composite()-methode gebruiken om tekst aan een afbeelding toe te voegen.

Stap 7 — Tekst toevoegen aan een afbeelding

In deze stap schrijf je tekst op een afbeelding. Op dit moment heeft Sharp geen ingebouwde manier om tekst aan een afbeelding toe te voegen. Om tekst toe te voegen, schrijf je eerst code om tekst te tekenen met Schaalbare Vector Graphics (SVG). Nadat je de SVG-afbeelding hebt gemaakt, schrijf je code om de afbeelding samen te stellen met de afbeelding sammy.png met behulp van de methode composite.

SVG is een op XML gebaseerde opmaaktaal voor het maken van vectorafbeeldingen voor het web. Je kunt tekst tekenen, of vormen zoals cirkels, driehoeken, en ook complexe vormen zoals illustraties, logo’s, enz. De complexe vormen worden gemaakt met een grafisch gereedschap zoals Inkscape dat de SVG-code genereert. De SVG-vormen kunnen worden weergegeven en geschaald naar elke grootte zonder verlies van kwaliteit.

Maak het bestand addTextOnImage.js aan en open het in je teksteditor.

nano addTextOnImage.js

Voeg in je bestand addTextOnImage.js de volgende code toe om een SVG-container te maken:

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

De functie addTextOnImage() definieert vier variabelen: width, height, text, en svgImage. width bevat het geheel getal 750, en height bevat het geheel getal 483. text bevat de string Sammy the Shark. Dit is de tekst die je zult tekenen met behulp van SVG.

De variabele svgImage bevat het svg-element. Het svg-element heeft twee attributen: width en height, die de eerder gedefinieerde variabelen width en height interpoleren. Het svg-element creëert een transparante container volgens de opgegeven breedte en hoogte.

Je hebt het svg-element een width van 750 en een height van 483 gegeven, zodat de SVG-afbeelding dezelfde grootte zal hebben als sammy.png. Dit zal helpen om de tekst gecentreerd te laten lijken op de afbeelding sammy.png.

Vervolgens ga je de tekstafbeeldingen tekenen. Voeg de gemarkeerde code toe om Sammy de Haai op de SVG-container te tekenen:

async function addTextOnImage() {
    ...
    const svg = `
    <svg width="${width}" height="${height}">
    <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
  ....
}

Het SVG text-element heeft vier attributen: x, y, text-anchor en class. x en y definiëren de positie voor de tekst die je op de SVG-container tekent. Het attribuut x positioneert de tekst horizontaal en het attribuut y positioneert de tekst verticaal.

Het instellen van x op 50% plaatst de tekst in het midden van de container op de x-as, en het instellen van y op 50% positioneert de tekst in het midden op de y-as van de SVG-afbeelding.

De text-anchor lijnt tekst horizontaal uit. Het instellen van text-anchor op middle zal de tekst op het midden uitlijnen op de x-coördinaat die je hebt gespecificeerd.

class definieert een klassenaam op het text-element. Je zult de klassenaam gebruiken om CSS-stijlen toe te passen op het text-element.

${text} interpoleert de string Sammy the Shark die is opgeslagen in de text-variabele. Dit is de tekst die zal worden getekend op de SVG-afbeelding.

Vervolgens voeg je de gemarkeerde code toe om de tekst te stylen met 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 deze code verandert fill de tekstkleur naar zwart, font-size verandert de lettergrootte, en font-weight verandert de letterdikte.

Op dit punt heb je de code geschreven die nodig is om de tekst Sammy the Shark met SVG te tekenen. Vervolgens zal je de SVG-afbeelding opslaan als een png met sharp zodat je kunt zien hoe SVG de tekst tekent. Als dat is gedaan, zal je de SVG-afbeelding samenvoegen met sammy.png.

Voeg de gemarkeerde code toe om de SVG-afbeelding op te slaan als een png met 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() creëert een Buffer-object vanuit de SVG-afbeelding. Een buffer is een tijdelijke ruimte in het geheugen die binaire gegevens opslaat.

Na het maken van het bufferobject maak je een sharp-instantie aan met het bufferobject als invoer. Naast een afbeeldingspad accepteert sharp ook een buffer, Uint9Array of Uint8ClampedArray.

Tenslotte sla je de SVG-afbeelding op in de projectdirectory als svg-image.png.

Hier is de volledige code:

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

Sla het bestand op en verlaat het, voer vervolgens je script uit met de volgende opdracht:

node addTextOnImage.js

sudo apt update
sudo apt install fontconfig

Open svg-image.png op uw lokale machine. U zou nu de tekst Sammy the Shark moeten zien weergegeven met een transparante achtergrond:

Nu u hebt bevestigd dat de SVG-code de tekst tekent, gaat u de tekstgrafieken samenvoegen met sammy.png.

Voeg de volgende gemarkeerde code toe om de SVG-tekstgrafieken op sammy.png samen te voegen.

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

De composite() methode leest de SVG-afbeelding uit de svgBuffer variabele, en plaatst deze 0 pixels vanaf de bovenkant en 0 pixels vanaf de linkerkant van sammy.png. Vervolgens slaat u de samengestelde afbeelding op als sammy-text-overlay.png.

Sla uw bestand op en sluit het, voer vervolgens uw programma uit met de volgende opdracht:

node addTextOnImage.js

Open sammy-text-overlay.png op uw lokale machine. U zou nu tekst boven op de afbeelding moeten zien:

U heeft nu de composite() methode gebruikt om tekst gemaakt met SVG op een andere afbeelding toe te voegen.

Conclusie

In dit artikel heb je geleerd hoe je scherpe methoden kunt gebruiken om afbeeldingen te verwerken in Node.js. Allereerst heb je een instantie gemaakt om een afbeelding te lezen en de metadata() methode gebruikt om de metagegevens van de afbeelding te extraheren. Vervolgens heb je de resize() methode gebruikt om een afbeelding te verkleinen. Daarna heb je de format() methode gebruikt om het afbeeldingstype te wijzigen en de afbeelding te comprimeren. Vervolgens ben je overgegaan op het gebruiken van verschillende scherpe methoden om een afbeelding bij te snijden, naar grijstinten om te zetten, te roteren en te vervagen. Ten slotte heb je de composite() methode gebruikt om een afbeelding samen te stellen en tekst aan een afbeelding toe te voegen.

Voor meer inzicht in aanvullende scherpe methoden, bezoek de sharp documentatie. Als je wilt doorgaan met het leren van Node.js, bekijk dan de How To Code in Node.js series.