如何使用 Sharp 在 Node.js 中处理图像

作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。

介绍

数字图像处理是使用计算机来分析和操纵图像的一种方法,该过程涉及阅读图像,应用方法来改变或增强图像,然后保存处理的图像。 对于处理用户上传内容处理图像的应用程序来说,这是常见的。 例如,如果您正在编写一个允许用户上传图像的Web应用程序,用户可能会上传不必要的大型图像。 这可能会对应用程序加载速度产生负面影响,并浪费您的服务器空间。

Node.js 具有可用于处理图像的图书馆生态系统,如 sharp, jimp和 gm 模块.本文将重点关注尖锐的模块。 sharp 是一个受欢迎的 Node.js图像处理库,支持各种图像文件格式,如 JPEG, PNG, GIF, WebP, AVIF, SVG和 TIFF。

在本教程中,您将使用尖锐阅读图像并提取其元数据,调整尺寸,更改图像格式,并压缩图像. 然后您将收割,灰度,旋转和模糊图像. 最后,您将复制图像,并在图像上添加文本。

前提条件

要完成本教程,您将需要:

• Node.js 设置在您的本地开发环境中. 您可以遵循 如何安装 Node.js 和创建本地开发环境来学习如何在您的系统上安装 Node.js 和 npm.
• 如何编写和运行 Node.js 程序的基本知识. 您可以遵循 如何在 Node.js 编写和运行您的第一个程序来学习基础知识。
• 对 JavaScript 中的非同步编程的基本理解。

步骤 1 – 设置项目目录和下载图像

在开始编写代码之前,您需要创建包含代码和您将在本文中使用的图像的目录。

打开终端并使用mkdir命令创建项目目录:

1mkdir process_images

使用cd命令移动到新创建的目录:

1cd process_images

使用npm init命令创建一个package.json文件,以跟踪项目依赖:

1npm init -y

-y选项告诉npm创建默认文件package.json。

接下来,安装sharp作为依赖:

1npm install sharp

您将在本教程中使用以下三个图像:

接下来,使用curl命令下载项目目录中的图像。

使用以下命令下载第一个图像,将图像下载为 sammy.png:

1curl -O how-to-process-images-in-node-js-with-sharp/sammy.png

接下来,下载下列命令下载的第二张图像,将图像下载为underwater.png:

1curl -O how-to-process-images-in-node-js-with-sharp/underwater.png

最后,使用以下命令下载第三张图像,将图像下载为 sammy-transparent.png:

1curl -O how-to-process-images-in-node-js-with-sharp/sammy-transparent.png

有了项目目录和依赖设置,您现在已经准备好开始处理图像。

步骤 2 – 阅读图像和输出元数据

在本节中,您将编写代码来读取图像并提取其 metadata. 图像元数据是嵌入到图像中的文本,其中包括有关图像的信息,如其类型,宽度和高度。

要提取元数据,您首先将导入尖端模块,创建一个尖端的实例,然后将图像路径作为一个参数。

要做到这一点,请在您喜欢的文本编辑器中创建并打开readImage.js文件,本教程使用一个名为nano的终端文本编辑器:

1nano readImage.js

接下来,请在文件顶部输入sharp:

1[label process_images/readImage.js]
2const sharp = require("sharp");

sharp 是一个基于承诺的(https://andsky.com/tech/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript#promises)图像处理模块.当您创建一个尖锐实例时,它会返回一个承诺。您可以使用然后方法解决承诺,或使用 async/await,该语法具有更清洁的语法。

要使用async/await语法,您需要通过将async关键字放在函数开始时创建一个非同步函数,这将允许您在函数内部使用await关键字来解决当您阅读图像时返回的承诺。

在readImage.js文件中,定义一个非同步函数getMetadata(),读取图像,提取其元数据,并登录到控制台:

1[label process_images/readImage.js]
2const sharp = require("sharp");
3
4async function getMetadata() {
5  const metadata = await sharp("sammy.png").metadata();
6  console.log(metadata);
7}

getMetadata()是一个不同步的函数,因为您在函数标签之前定义了async的关键字,这允许您在函数中使用等待语法。

在函数体内,您通过调用sharp()来读取图像,这将图像路径作为一个参数,在这里使用sammy.png。

除了拍摄图像路径外,sharp()也可以读取存储在 Buffer、 Uint8Array或 Uint8ClampedArray中的图像数据,只要图像是JPEG、PNG、GIF、WebP、AVIF、SVG或TIFF。

现在,当您使用sharp()来读取图像时,它会创建一个sharp实例,然后将尖锐模块的metadata()方法链接到该实例,该方法会返回包含图像元数据的对象,您将其存储在metadata变量中,并使用console.log()记录其内容。

您的程序现在可以读取图像并返回其元数据,但是,如果该程序在运行过程中丢失错误,它会崩溃。

要做到这一点,请将代码嵌入到getMetadata()函数中,在一个 try...catch块中:

 1[label process_images/readImage.js]
 2const sharp = require("sharp");
 3
 4async function getMetadata() {
 5  try {
 6    const metadata = await sharp("sammy.png").metadata();
 7    console.log(metadata);
 8  } catch (error) {
 9    console.log(`An error occurred during processing: ${error}`);
10  }
11}

在试用块中,你读到一个图像,提取并记录其元数据. 当这个过程中出现错误时,执行将跳到捕获部分并记录防止程序崩溃的错误。

最后,通过添加突出的行来调用getMetadata()函数:

 1[label process_images/readImage.js]
 2
 3const sharp = require("sharp");
 4
 5async function getMetadata() {
 6  try {
 7    const metadata = await sharp("sammy.png").metadata();
 8    console.log(metadata);
 9  } catch (error) {
10    console.log(`An error occurred during processing: ${error}`);
11  }
12}
13
14getMetadata();

现在,保存并退出文件。输入y来保存您在文件中所做的更改,并通过按ENTER或RETURN键确认文件名。

使用node命令运行文件:

1node readImage.js

你应该看到一个类似于此的输出:

 1[secondary_label Output]
 2{
 3  format: 'png',
 4  width: 750,
 5  height: 483,
 6  space: 'srgb',
 7  channels: 3,
 8  depth: 'uchar',
 9  density: 72,
10  isProgressive: false,
11  hasProfile: false,
12  hasAlpha: false
13}

现在您已经阅读了图像并提取了其元数据,您现在将更大图像,更改其格式,并压缩它。

步骤 3 – 重置、更改图像格式和压缩图像

更改是改变图像尺寸的过程,而不从中切除任何东西,这会影响图像文件大小. 在本节中,您将更改图像的大小,更改图像类型,并压缩图像。

首先,您将从sharp实例链接resize()方法以重新大小图像,并将其保存到项目目录中。第二,您将将format()方法链接到reize()图像,以便将其格式从png更改为jpeg。

在您的文本编辑器中创建并打开 resizeImage.js 文件:

1nano resizeImage.js

添加以下代码,将图像大小调整为150px宽度和97px高度:

 1[label process_images/resizeImage.js]
 2const sharp = require("sharp");
 3
 4async function resizeImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .resize({
 8        width: 150,
 9        height: 97
10      })
11      .toFile("sammy-resized.png");
12  } catch (error) {
13    console.log(error);
14  }
15}
16
17resizeImage();

「resizeImage()」函数将尖端模块的「resize()」方法链接到「sharp」实例中。该方法将对象作为参数。在对象中,您使用「宽度」和「高度」属性设置所需的图像尺寸。将「宽度」设置为「150」和「高度」设置为「97」将使图像成为「150px」宽度和「97px」高度。

重新调整图像后,你链接尖锐模块的 toFile() 方法,它将图像路径作为一个参数。

现在,保存并退出文件,在终端运行您的程序:

1node resizeImage.js

您将不会收到任何输出,但您应该在项目目录中看到一个名为'sammy-resized.png' 创建的新图像文件。

打开本地机器上的图像. 你应该看到Sammy的150px宽和97px高的图像:

现在你可以重大的图像,接下来你将重大的图像格式从png转换为jpeg,压缩图像,并将其保存到工作目录中。

添加突出的代码以将图像格式更改为jpeg,并压缩它:

 1[label process_images/resizeImage.js]
 2const sharp = require("sharp");
 3
 4async function resizeImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .resize({
 8        width: 150,
 9        height: 97
10      })
11      .toFormat("jpeg", { mozjpeg: true })
12      .toFile("sammy-resized-compressed.jpeg");
13  } catch (error) {
14    console.log(error);
15  }
16}
17
18resizeImage();

在resizeImage()函数中,您使用尖端模块的toFormat()方法来更改图像格式并压缩它。

要压缩图像,您将一个具有布尔值的mozjpeg属性传递给图像。当您将图像设置为true,Ashp 会使用 mozjpeg 默认值来压缩图像而不会损害质量。

<$>[注] 注: 对于 toFormat() 方法的第二个参数,每个图像格式都采用具有不同的属性的对象。

然而,其他图像格式有等效选项,如质量,压缩和无损。请确保参阅 文档以了解您压缩的图像格式的选项类型是可接受的。

接下来,您将toFile()方法转移到另一个文件名,以便将压缩图像保存为sammy-resized-compressed.jpeg。

现在,保存并退出文件,然后使用以下命令运行您的代码:

1node resizeImage.js

您将不会收到任何输出,但一个图像文件 sammy-resized-compressed.jpeg 将保存到您的项目目录中。

在本地机器上打开图像,你会看到以下图像:

现在您的图像已压缩,请检查文件大小以确认您的压缩成功. 在您的终端中,运行du命令来检查sammy.png的文件大小:

1du -h sammy.png

-h 选项产生可人读的输出,显示在 kilobytes, megabytes和许多其他文件大小。

运行命令后,您应该看到类似于此的输出:

1[secondary_label Output]
2120K sammy.png

输出显示原始图像为120千兆字节。

接下来,检查sammy-resized.png的文件大小:

1du -h sammy-resized.png

运行命令后,您将看到以下输出:

1[secondary_label Output]
28.0K sammy-resized.png

sammy-resized.png 是从 120 kilobytes 降到 8 kilobytes. 这表明,重置操作会影响文件大小。

现在,检查sammy-resized-compressed.jpeg的文件大小:

1du -h sammy-resized-compressed.jpeg

运行命令后,您将看到以下输出:

1[secondary_label Output]
24.0K sammy-resized-compressed.jpeg

sammy-resized-compressed.jpeg现在从8千兆字节省了4千兆字节,表明压缩工作了。

现在你已经调整了图像的大小,更改了其格式并压缩了它,你将剪切和缩小图像。

步骤 4 – 剪辑和将图像转换为灰度

在此步骤中,您将切割图像,并将其转换为灰度。切割是从图像中删除不需要的区域的过程。您将使用 extend() 方法切割 sammy.png 图像。之后,您将把 grayscale() 方法链接到切割图像实例并将其转换为灰度。

在文本编辑器中创建并打开cropImage.js:

1nano cropImage.js

在你的「cropImage.js」文件中,添加以下代码来剪除图像:

 1[label process_images/cropImage.js]
 2const sharp = require("sharp");
 3
 4async function cropImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .extract({ width: 500, height: 330, left: 120, top: 70  })
 8      .toFile("sammy-cropped.png");
 9  } catch (error) {
10    console.log(error);
11  }
12}
13
14cropImage();

cropImage()函数是一个非同步函数,它会读取图像并返回剪切的图像。在试图块中,一个尖锐实例会读取图像。

• 宽度:您要收获的区域的宽度.
• 高度:您要收获的区域的高度.
• 顶部:您要收获的区域的垂直位置.
• 左:您想要收获的区域的水平位置。

当您将宽度设置为500和高度设置为330,想象一下,尖锐将创建一个透明的框在您要剪切的图像的顶部。

当您将左设置为120,该框将从图像的左边缘定位为120px,并将顶部设置为70将该框定位为70px。

适合盒子内的图像区域将被提取并保存为sammy-cropped.png作为一个单独的图像。

保存和退出文件. 在终端中运行程序:

1node cropImage.js

输出不会显示,但图像 sammy-cropped.png 将保存到您的项目目录中。

在本地机器上打开图像. 你应该看到图像剪辑:

现在你已经剪切了图像,你将将图像转换为灰度。 要做到这一点,你将灰度方法链接到尖度实例。 添加突出代码将图像转换为灰度:

 1[label process_images/cropImage.js]
 2const sharp = require("sharp");
 3
 4async function cropImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .extract({ width: 500, height: 330, left: 120, top: 70 })
 8      .grayscale()
 9      .toFile("sammy-cropped-grayscale.png");
10  } catch (error) {
11    console.log(error);
12  }
13}
14
15cropImage();

cropImage()函数通过将尖端模块的grayscale()方法链接到sharp实例中,将剪切的图像转换为灰度,然后将图像保存在项目目录中作为sammy-cropped-grayscale.png。

按CTRL+X来保存和退出文件。

在终端中运行您的代码:

1node cropImage.js

在本地计算机上打开 `sammy-cropped-grayscale.png. 你现在应该看到灰度的图像:

现在你已经剪切并提取了图像,你将工作旋转和模糊它。

步骤 5 – 旋转和模糊图像

在此步骤中,您将以33度的角度旋转sammy.png图像,您还将对旋转的图像应用 Gaussian blur。

在文本编辑器中创建一个rotateImage.js文件:

1nano rotateImage.js

在你的「rotateImage.js」文件中,写下以下代码块来创建一个将「sammy.png」旋转到「33」度的角度的函数:

 1[label process_images/rotateImage.js]
 2const sharp = require("sharp");
 3
 4async function rotateImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
 8      .toFile("sammy-rotated.png");
 9  } catch (error) {
10    console.log(error);
11  }
12}
13
14rotateImage();

rotateImage()函数是一个非同步函数,读取图像并将旋转图像返回到33度的角度。在该函数中,尖端模块的rotate()方法需要两个参数。第一个参数是33度的旋转角度。默认情况下,尖端会使旋转图像的背景变黑。要删除黑色背景,您将一个对象作为第二个参数传输,以使背景透明。

该对象具有一个背景属性,该属性包含一个定义 RGBA颜色模型的对象。

• r:控制红色强度.它接受的整数值为 0至 255. 0意味着颜色不被使用,而 255是红色在其最高点上。
• g:控制绿色强度。它接受的整数值为 0-255. 0意味着颜色不是使用的绿色,而 255是绿色在其最高点上。
• b:控制的强度为 蓝色.它也接受的整数值在 0和 255之间。 0意味着蓝色不被使用,而 255是蓝色在其最高点上。
• alpha:控制了由 r、 g和 b定义

要使alpha属性工作,您必须确保您为r,g和b定义和设置值。将r,g和b值设置为0将创建黑色色。

现在,保存并退出文件。在终端中运行你的脚本:

1node rotateImage.js

检查你的项目目录中是否存在 `sammy-rotated.png. 在本地机器上打开它。

您应该看到图像以33度的角度旋转:

接下来,您将模糊旋转的图像. 您将通过将 blur() 方法链接到 sharp 实例来实现。

输入下面的突出代码来模糊图像:

 1[label process_images/rotateImage.js]
 2const sharp = require("sharp");
 3
 4async function rotateImage() {
 5  try {
 6    await sharp("sammy.png")
 7      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
 8      .blur(4)
 9      .toFile("sammy-rotated-blurred.png");
10  } catch (error) {
11    console.log(error);
12  }
13}
14
15rotateImage();

现在,rotateImage()函数读取图像,旋转它,并将Gaussian blur应用到图像上。它使用尖锐模块的blur()方法将Gaussian blur应用到图像上。该方法接受包含0.3和1000之间的Sigma值的单个参数。通过它4将应用4的Sigma值的Gaussian blur。

你的脚本现在会用4的sigma值模糊旋转的图像. 保存和退出文件,然后在终端中运行脚本:

1node rotateImage.js

运行脚本后,在本地机器上打开 sammy-rotated-blurred.png 文件. 你现在应该看到旋转图像模糊:

现在你已经旋转和模糊的图像,你将组成一个图像在另一个。

步骤 6 — 使用 composite() 构成图像

图像组成是将两个或多个单独的图像合并在一起创建一个单一的图像的过程,以创建来自不同照片的最佳元素的效果。

在本节中,你将编写sammy-transparent.png在underwater.png上。这将创建深海中游泳的幻觉。 要编写图像,你将composite()方法链接到sharp实例。

在文本编辑器中创建并打开文件 compositeImage.js:

1nano compositeImages.js

现在,通过在compositeImages.js文件中添加以下代码来创建一个函数来组合两个图像:

 1[label process_images/compositeImages.js]
 2const sharp = require("sharp");
 3
 4async function compositeImages() {
 5  try {
 6    await sharp("underwater.png")
 7      .composite([
 8        {
 9          input: "sammy-transparent.png",
10          top: 50,
11          left: 50,
12        },
13      ])
14      .toFile("sammy-underwater.png");
15  } catch (error) {
16    console.log(error);
17  }
18}
19
20compositeImages()

compositeImages()函数首先读取underwater.png图像,然后连接尖锐模块的composite()方法,以数组为参数,数组包含一个单个对象,读取sammy-transparent.png图像。

• input:采用您要复制的图像的路径,以处理的图像为上。 它还接受一个 Buffer, Uint8Array,或 Uint8ClampedArray作为输入。
• top:控制您要复制的图像的垂直位置。 将 top 设置为 50,将 sammy-transparent.png 图像从 underwater.png 图像的顶端抵消 50px。
• left:控制您要复制的图像的水平位置。 将 left 设置为 50,将 sammy-transparent.png 50

composite()方法需要与处理的图像相同大小或更小的图像。

要想象composite()方法正在做什么,想想它就像创建一堆图像一样。

「上」和「左」值將「sammy-transparent.png」圖像相對於「underwater.png」圖像。

保存你的脚本,然后离开文件. 运行你的脚本来创建一个图像组成:

1node compositeImages.js

在您的本地机器中打开sammy-underwater.png。你现在应该看到sammy-transparent.png构成在underwater.png图像上:

您现在使用composite()方法编译了图像,在下一步,您将使用composite()方法将文本添加到图像中。

步骤 7 - 添加文本到图像

在此步骤中,您将在图像上写文本. 在写作时, sharp 没有添加文本到图像的原始方式. 要添加文本,首先,您将使用 Scalable Vector Graphics(SVG)编写代码来绘制文本。

SVG 是一个基于 XML的标记语言,用于为 Web 创建矢量图形. 您可以绘制文本,或形状,如圆形,三角形,以及绘制复杂的形状,如插图,徽标,等等. 复杂的形状是用图形工具,如 Inkscape创建的,生成 SVG 代码。

在文本编辑器中创建并打开addTextOnImage.js文件。

1nano addTextOnImage.js

在addTextOnImage.js文件中,添加以下代码来创建 SVG 容器:

 1[label process_images/addTextOnImage.js]
 2const sharp = require("sharp");
 3
 4async function addTextOnImage() {
 5  try {
 6    const width = 750;
 7    const height = 483;
 8    const text = "Sammy the Shark";
 9
10    const svgImage = `
11    <svg width="${width}" height="${height}">
12    </svg>
13    `;
14  } catch (error) {
15    console.log(error);
16  }
17}
18
19addTextOnImage();

addTextOnImage()函数定义了四个变量:width,height,text和svgImage。width持有整数750,height持有整数483。

svgImage变量持有svg元素. svg元素有两个属性:宽度和高度,这些属性对你之前定义的宽度和高度变量进行交叉。

你给svg元素一个宽度的750和高度的483,所以SVG图像将与sammy.png相同的大小,这将有助于使文本看起来以sammy.png图像为中心。

接下来,您将绘制文本图形. 添加突出的代码,在 SVG 容器上绘制Sammy the Shark:

 1[label process_images/addTextOnImage.js]
 2async function addTextOnImage() {
 3    ...
 4    const svg = `
 5    <svg width="${width}" height="${height}">
 6    <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
 7    </svg>
 8    `;
 9  ....
10}

SVG 文本元素有四个属性: x, y, text-anchor 和 class. x 和 y 定义你在 SVG 容器上绘制的文本的位置. x 属性将文本放到水平位置,而 y 属性将文本放到垂直位置。

将x设置为50%,将文本拉到 x 轴上的容器中间,并将y设置为50%,将文本放置在 SVG 图像的 y 轴中间。

设置文本为中间将文本在中间与您指定的x坐标对齐。

class定义了text元素上的类名称,您将使用类名称将CSS风格应用于text元素。

${text} 插入在 text 变量中存储的 Sammy the Shark 字符串. 这是在 SVG 图像上绘制的文本。

接下来,添加突出的代码以使用 CSS 来格式化文本:

1[label process_images/addTextOnImage.js]
2    const svg = `
3    <svg width="${width}" height="${height}">
4      <style>
5      .title { fill: #001; font-size: 70px; font-weight: bold;}
6      </style>
7      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
8    </svg>
9    `;

在此代码中,填写会更改文本颜色为黑色,字体大小会更改字体大小,字体重量会更改字体重量。

此时,您已经写入了用 SVG 绘制文本 Sammy the Shark 所需的代码,接下来,您将将 SVG 图像保存为 png,以便您可以看到 SVG 是如何绘制文本。

添加突出的代码以将 SVG 图像保存为png以尖锐:

 1[label process_images/addTextOnImage.js]
 2    ....
 3    const svgImage = `
 4    <svg width="${width}" height="${height}">
 5    ...
 6    </svg>
 7    `;
 8    const svgBuffer = Buffer.from(svgImage);
 9    const image = await sharp(svgBuffer).toFile("svg-image.png");
10  } catch (error) {
11    console.log(error);
12  }
13}
14
15addTextOnImage();

Buffer.from() 会从 SVG 图像中创建一个 Buffer 对象. 缓冲器是存储二进制数据的内存中的临时空间。

在创建缓冲对象后,您将创建一个以缓冲对象为输入的尖锐实例,除了图像路径外,尖锐还会接受 缓冲, Uint9Array,或 Uint8ClampedArray。

最后,您将 SVG 图像保存到项目目录中,以svg-image.png。

以下是完整的代码:

 1[label process_images/addTextOnImage.js]
 2const sharp = require("sharp");
 3
 4async function addTextOnImage() {
 5  try {
 6    const width = 750;
 7    const height = 483;
 8    const text = "Sammy the Shark";
 9
10    const svgImage = `
11    <svg width="${width}" height="${height}">
12      <style>
13      .title { fill: #001; font-size: 70px; font-weight: bold;}
14      </style>
15      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
16    </svg>
17    `;
18    const svgBuffer = Buffer.from(svgImage);
19    const image = await sharp(svgBuffer).toFile("svg-image.png");
20  } catch (error) {
21    console.log(error);
22  }
23}
24
25addTextOnImage()

保存和退出文件,然后使用以下命令运行您的脚本:

1node addTextOnImage.js

<$>[注] 注: 如果您使用 选项 2 — 使用 NodeSource PPA 使用 Apt 安装 Node.js或 选项 3 — 使用 Node Version Manager 安装 Node.js安装 Node.js,并收到错误 fontconfig 错误:无法加载默认配置文件:没有此类文件: (null),请安装 fontconfig来生成字体配置文件。

更新您的服务器的包索引,然后使用apt install来安装fontconfig。

1sudo apt update
2sudo apt install fontconfig

美元

在本地机器上打开 svg-image.png. 你现在应该看到带透明背景的文字 Sammy the Shark`:

现在,你已经确认了 SVG 代码绘制文本,你会将文本图形编译到 sammy.png。

添加以下突出代码,将 SVG 文本图形图像复制到 sammy.png 图像中。

 1[label process_images/addTextOnImage.js]
 2const sharp = require("sharp");
 3
 4async function addTextOnImage() {
 5  try {
 6    const width = 750;
 7    const height = 483;
 8    const text = "Sammy the Shark";
 9
10    const svgImage = `
11    <svg width="${width}" height="${height}">
12      <style>
13      .title { fill: #001; font-size: 70px; font-weight: bold;}
14      </style>
15      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
16    </svg>
17    `;
18    const svgBuffer = Buffer.from(svgImage);
19    const image = await sharp("sammy.png")
20      .composite([
21        {
22          input: svgBuffer,
23          top: 0,
24          left: 0,
25        },
26      ])
27      .toFile("sammy-text-overlay.png");
28  } catch (error) {
29    console.log(error);
30  }
31}
32
33addTextOnImage();

「composite()」方法从「svgBuffer」变量中读取 SVG 图像,并从顶部放置「0」像素,并从「sammy.png」的左边放置「0」像素。

保存并关闭您的文件,然后使用以下命令运行您的程序:

1node addTextOnImage.js

在本地计算机上打开 `sammy-text-overlay.png. 你应该看到在图像上添加的文本:

您现在已经使用了composite()方法将使用 SVG 创建的文本添加到另一个图像上。

结论

在本文中,您了解了如何在 Node.js 中使用尖锐的方法来处理图像. 首先,您创建了一个读取图像的实例,并使用了 metadata() 方法来提取图像元数据。 然后,您使用了 resize() 方法来调整图像的大小。 然后,您使用了 format() 方法来更改图像类型,并压缩图像。

如要了解更多有关其他尖锐方法的信息,请参阅 尖锐文档。 如果您想继续学习 Node.js,请参阅 如何在 Node.js 系列中编码。