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

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

数字图像处理是一种使用计算机分析和处理图像的方法。该过程包括读取图像、应用方法来更改或增强图像，然后保存处理后的图像。处理用户上传的内容来处理图像的应用程序很常见。例如，如果您正在编写一个允许用户上传图像的 Web 应用程序，那么用户可能会上传不必要的大图像。这会对应用程序加载速度产生负面影响，并且还会浪费您的服务器空间。通过图像处理，您的应用程序可以调整和压缩所有用户上传的图像，这可以显着提高您的应用程序性能并节省您的服务器磁盘空间。

Node.js 有一个可用于处理图像的库生态系统，例如 sharp、jimp 和 gm 模块。本文将重点介绍sharp模块。 sharp 是一个流行的 Node.js 图像处理库，支持多种图像文件格式，例如 JPEG、PNG、GIF、[ X154X]WebP、AVIF、SVG 和 TIFF。

在本教程中，您将使用 sharp 读取图像并提取其元数据、调整大小、更改图像格式以及压缩图像。然后，您将裁剪、灰度、旋转和模糊图像。最后，您将合成图像，并在图像上添加文本。在本教程结束时，您将对如何在 Node.js 中处理图像有一个很好的理解。

先决条件

要完成本教程，您需要：

在本地开发环境中设置 Node.js。您可以关注如何安装Node.js并创建本地开发环境学习如何在您的系统上安装Node.js和npm。
如何编写和运行 Node.js 程序的基本知识。你可以关注如何在Node.js中编写和运行你的第一个程序来学习基础知识。
基本了解 JavaScript 中的异步编程。跟随 Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript 回顾异步编程。

第 1 步 — 设置项目目录并下载图像

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

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

mkdir process_images

使用 cd 命令进入新创建的目录：

cd process_images

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

npm init -y

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

接下来，安装 sharp 作为依赖项：

npm install sharp

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

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

使用以下命令下载第一个图像。这会将图像下载为 sammy.png：

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

接下来，使用以下命令下载第二个图像。这会将图像下载为 underwater.png：

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

最后，使用以下命令下载第三个图像。这会将图像下载为 sammy-transparent.png：

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

设置好项目目录和依赖项后，您现在可以开始处理图像了。

第 2 步 — 读取图像并输出元数据

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

要提取元数据，您将首先导入 sharp 模块，创建 sharp 的实例，并将图像路径作为参数传递。之后，您将 metadata() 方法链接到实例以提取元数据并将其记录到控制台中。

为此，请在您喜欢的文本编辑器中创建并打开 readImage.js 文件。本教程使用名为 nano 的终端文本编辑器：

nano readImage.js

接下来，在文件顶部的 sharp 中要求：

process_images/readImage.js

const sharp = require("sharp");

sharp 是一个基于承诺的图像处理模块。当您创建 sharp 实例时，它会返回一个承诺。您可以使用 then 方法或使用 async/await 来解决承诺，它具有更清晰的语法。

要使用 async/await 语法，您需要通过在函数开头放置 async 关键字来创建异步函数。这将允许您在函数内使用 await 关键字来解析读取图像时返回的承诺。

在您的 readImage.js 文件中，定义一个异步函数 getMetadata() 来读取图像、提取其元数据并将其记录到控制台中：

process_images/readImage.js

const sharp = require("sharp");

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

getMetadata() 是一个异步函数，给定您在 function 标签之前定义的 async 关键字。这使您可以在函数中使用 await 语法。 getMetadata() 函数将读取图像并返回带有元数据的对象。

在函数体中，您可以通过调用 sharp() 来读取图像，它将图像路径作为参数，这里使用 sammy.png。

除了获取图像路径外，sharp() 还可以读取存储在 Buffer、Uint8Array 或 Uint8ClampedArray 中的图像数据，前提是图像是 JPEG 、PNG、GIF、WebP、AVIF、SVG 或 TIFF。

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

您的程序现在可以读取图像并返回其元数据。但是，如果程序在执行过程中抛出错误，它就会崩溃。为了解决这个问题，您需要在错误发生时捕获它们。

为此，请将 getMetadata() 函数中的代码包装在 try...catch 块中：

process_images/readImage.js

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

在 try 块中，您读取图像，提取并记录其元数据。在此过程中发生错误时，执行会跳到 catch 部分并记录错误以防止程序崩溃。

最后，通过添加突出显示的行来调用 getMetadata() 函数：

process_images/readImage.js

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

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

使用 node 命令运行文件：

node readImage.js

您应该会看到与此类似的输出：

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

现在您已经读取了图像并提取了其元数据，现在您将调整图像大小、更改其格式并对其进行压缩。

第 3 步 — 调整大小、更改图像格式和压缩图像

调整大小是更改图像尺寸而不从中删除任何内容的过程，这会影响图像文件的大小。在本节中，您将调整图像大小、更改其图像类型并压缩图像。图像压缩是在不损失质量的情况下减小图像文件大小的过程。

首先，您将从 sharp 实例中链接 resize() 方法来调整图像大小，并将其保存在项目目录中。其次，您将 format() 方法链接到调整大小的图像，以将其格式从 png 更改为 jpeg。此外，您将向 format() 方法传递一个选项以压缩图像并将其保存到目录中。

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

nano resizeImage.js

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

process_images/resizeImage.js

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

resizeImage() 函数将Sharp模块的resize()方法链接到sharp实例。该方法将对象作为参数。在对象中，您可以使用 width 和 height 属性设置所需的图像尺寸。将 width 设置为 150 并将 height 设置为 97 将使图像 150px 宽， 97px 高.

调整图像大小后，链接Sharp模块的 toFile() 方法，该方法将图像路径作为参数。将 sammy-resized.png 作为参数传递会将具有该名称的图像文件保存在程序的工作目录中。

现在，保存并退出文件。在终端中运行您的程序：

node resizeImage.js

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

在本地计算机上打开图像。您应该看到 Sammy 150px 宽和 97px 高的图像：

现在您可以调整图像大小，接下来您将调整大小的图像格式从 png 转换为 jpeg，压缩图像，并将其保存在工作目录中。为此，您将使用 toFormat() 方法，您将在 resize() 方法之后链接该方法。

添加突出显示的代码以将图像格式更改为 jpeg 并对其进行压缩：

process_images/resizeImage.js

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

在 resizeImage() 函数中，你可以使用 sharp 模块的 toFormat() 方法来改变图像格式并进行压缩。 toFormat() 方法的第一个参数是一个字符串，其中包含您要将图像转换为的图像格式。第二个参数是一个可选对象，其中包含增强和压缩图像的输出选项。

要压缩图像，您需要传递一个包含布尔值的 mozjpeg 属性。设置为 true 时，sharp 使用 mozjpeg 默认压缩图像而不牺牲质量。对象也可以有更多的选择；有关详细信息，请参阅尖锐的文档。

注意：关于toFormat()方法的第二个参数，每种图像格式都接受一个具有不同属性的对象。例如，mozjpeg 属性仅在 JPEG 图像上被接受。

但是，其他图像格式具有等效选项，例如 quality、compression 和 lossless。请务必参考文档以了解您正在压缩的图像格式可以接受哪些选项。

接下来，向 toFile() 方法传递一个不同的文件名，以将压缩图像保存为 sammy-resized-compressed.jpeg。

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

node resizeImage.js

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

在本地机器上打开图像，您将看到以下图像：

现在压缩图像后，检查文件大小以确认压缩成功。在您的终端中，运行 du 命令来检查 sammy.png 的文件大小：

du -h sammy.png

-h 选项产生人类可读的输出，以千字节、兆字节等为单位显示文件大小。

运行命令后，您应该会看到类似以下的输出：

Output120K    sammy.png

输出显示原始图像为 120 KB。

接下来，检查 sammy-resized.png 的文件大小：

du -h sammy-resized.png

运行命令后，您将看到以下输出：

Output8.0K     sammy-resized.png

sammy-resized.png 从 120 KB 减少了 8 KB。这表明调整大小操作会影响文件大小。

现在，检查 sammy-resized-compressed.jpeg 的文件大小：

du -h sammy-resized-compressed.jpeg

运行命令后，您将看到以下输出：

Output4.0K    sammy-resized-compressed.jpeg

sammy-resized-compressed.jpeg 现在从 8 KB 减少了 4 KB，节省了 4 KB，表明压缩有效。

现在您已经调整了图像的大小、更改了其格式并对其进行了压缩，您将对图像进行裁剪和灰度化。

第 4 步 — 裁剪图像并将其转换为灰度

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

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

nano cropImage.js

在您的 cropImage.js 文件中，添加以下代码以裁剪图像：

process_images/cropImage.js

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

cropImage() 函数是一个异步函数，它读取图像并返回裁剪后的图像。在 try 块中，sharp 实例将读取图像。然后，链接到实例的 sharp 模块的 extract() 方法采用具有以下属性的对象：

width：要裁剪的区域的宽度。
height：要裁剪的区域的高度。
top：要裁剪的区域的垂直位置。
left：要裁剪的区域的水平位置。

当您将 width 设置为 500 并将 height 设置为 330 时，想象一下，sharp 在您要裁剪的图像顶部创建一个透明框。适合框的图像的任何部分都将保留，其余部分将被剪切：

top 和 left 属性控制盒子的位置。当您将 left 设置为 120 时，框位于距图像左边缘 120px 的位置，将 top 设置为 70 会将框定位在距图像左边缘 70px 的位置图像的上边缘。

适合框内的图像区域将被提取出来并作为单独的图像保存到 sammy-cropped.png 中。

保存并退出文件。在终端运行程序：

node cropImage.js

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

在本地计算机上打开图像。您应该看到图像被裁剪：

现在您裁剪了图像，您将图像转换为灰度。为此，您需要将 grayscale 方法链接到 sharp 实例。添加突出显示的代码以将图像转换为灰度：

process_images/cropImage.js

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

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

按 CTRL+X 保存并退出文件。

在终端中运行您的代码：

node cropImage.js

在本地机器上打开 sammy-cropped-grayscale.png。您现在应该看到灰度图像：

现在您已经裁剪和提取了图像，您将对其进行旋转和模糊处理。

第 5 步 — 旋转和模糊图像

在此步骤中，您将以 33 度角旋转 sammy.png 图像。您还将在旋转的图像上应用高斯模糊。高斯模糊是一种使用高斯函数对图像进行模糊处理的技术，可降低图像的噪点水平和细节。

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

nano rotateImage.js

在您的 rotateImage.js 文件中，编写以下代码块来创建一个将 sammy.png 旋转到 33 度角的函数：

process_images/rotateImage.js

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

rotateImage() 函数是一个异步函数，它读取图像并返回旋转到 33 度角的图像。在函数中，Sharp 模块的 rotate() 方法有两个参数。第一个参数是 33 度的旋转角度。默认情况下，sharp 使旋转图像的背景变黑。要移除黑色背景，您需要传递一个对象作为第二个参数以使背景透明。

该对象具有 background 属性，该属性包含定义 RGBA 颜色模型的对象。 RGBA 代表红色、绿色、蓝色和 alpha。

r：控制红色的强度。它接受 0 到 255 的整数值。 0 表示没有使用颜色，255 为红色。
g：控制绿色的强度。它接受整数值 0-255。 0 表示不使用绿色，255 为绿色最高。
b：控制blue的强度。它还接受 0 和 255 之间的整数值。 0 表示不使用蓝色，而255 是最高的蓝色。
alpha：控制由 r、g 和 b 属性定义的颜色的不透明度。 0 或 0.0 使颜色透明，1 或 1.1 使颜色不透明。

要使 alpha 属性起作用，您必须确保定义并设置了 r、g 和 b 的值。将 r、g 和 b 值设置为 0 会创建黑色。要创建透明背景，必须先定义颜色，然后将alpha设置为0使其透明。

现在，保存并退出文件。在终端中运行您的脚本：

node rotateImage.js

检查项目目录中是否存在 sammy-rotated.png。在本地计算机上打开它。

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

接下来，您将模糊旋转的图像。您可以通过将 blur() 方法链接到 sharp 实例来实现这一点。

输入下面突出显示的代码以模糊图像：

process_images/rotateImage.js

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

rotateImage() 函数现在读取图像，旋转它，并对图像应用高斯模糊。它使用Sharp模块的blur()方法对图像应用高斯模糊。该方法接受包含 0.3 和 1000 之间的 sigma 值的单个参数。传递它 4 将应用 sigma 值为 4 的高斯模糊。图像模糊后，您定义保存模糊图像的路径。

您的脚本现在将使用 4 的 sigma 值模糊旋转后的图像。保存并退出文件，然后在终端中运行脚本：

node rotateImage.js

运行脚本后，在本地计算机上打开 sammy-rotated-blurred.png 文件。您现在应该会看到旋转后的图像变得模糊：

现在您已经旋转并模糊了图像，您将在另一个图像上合成一个图像。

第 6 步 — 使用 `composite()` 合成图像

图像合成是组合两个或多个单独的图片以创建单个图像的过程。这样做是为了创建从不同照片中借用最佳元素的效果。另一个常见的用例是为带有徽标的图像添加水印。

在本节中，您将在 underwater.png 上合成 sammy-transparent.png。这将产生一种 sammy 在海洋深处游动的错觉。要合成图像，您需要将 composite() 方法链接到 sharp 实例。

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

nano compositeImages.js

现在，通过在 compositeImages.js 文件中添加以下代码来创建一个合成两个图像的函数：

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

compositeImages() 函数首先读取 underwater.png 图像。接下来，链接Sharp模块的composite()方法，该方法将数组作为参数。该数组包含一个读取 sammy-transparent.png 图像的对象。该对象具有以下属性：

input：获取要在处理后的图像上合成的图像的路径。它还接受 Buffer、Uint8Array 或 Uint8ClampedArray 作为输入。
top：控制要合成的图像的垂直位置。将 top 设置为 50 会使 sammy-transparent.png 图像从 underwater.png 图像的上边缘偏移 50px。
left：控制要合成在另一个图像上的图像的水平位置。将 left 设置为 50 会使 sammy-transparent.png 从 underwater.png 图像的左边缘偏移 50px。

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

为了可视化 composite() 方法正在做什么，可以将其想象为创建一堆图像。 sammy-transparent.png 图像放置在 underwater.png 图像之上：

top 和 left 值相对于 underwater.png 图像定位 sammy-transparent.png 图像。

保存脚本并退出文件。运行您的脚本以创建图像合成：

node compositeImages.js

在本地机器上打开 sammy-underwater.png。您现在应该看到 sammy-transparent.png 合成在 underwater.png 图像上：

您现在已经使用 composite() 方法合成了图像。在下一步中，您将使用 composite() 方法向图像添加文本。

第 7 步 — 在图像上添加文本

在此步骤中，您将在图像上书写文本。在撰写本文时，sharp 没有向图像添加文本的本地方式。要添加文本，首先，您将编写代码以使用 Scalable Vector Graphics(SVG) 绘制文本。创建 SVG 图像后，您将编写代码以使用 composite 方法将图像与 sammy.png 图像合成。

SVG 是一种基于 XML 的标记语言，用于为 Web 创建矢量图形。您可以绘制文本或圆形、三角形等形状，也可以绘制插图、徽标等复杂形状。复杂的形状是使用生成 SVG 代码的 Inkscape 等图形工具创建的。 SVG 形状可以渲染和缩放到任何大小而不会损失质量。

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

nano addTextOnImage.js

在 addTextOnImage.js 文件中，添加以下代码以创建 SVG 容器：

process_images/addTextOnImage.js

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

addTextOnImage() 函数定义了四个变量：width、height、text 和 svgImage。 width 保存整数 750，height 保存整数 483。 text 包含字符串 Sammy the Shark。这是您将使用 SVG 绘制的文本。

svgImage 变量包含 svg 元素。 svg 元素有两个属性：width 和 height，它们对您之前定义的 width 和 height 变量进行插值。 svg 元素根据给定的宽度和高度创建一个透明容器。

您为 svg 元素提供了 750 的 width 和 483 的 height ，这样 SVG 图像的大小将与 [ X132X]。这将有助于使文本看起来以 sammy.png 图像为中心。

接下来，您将绘制文本图形。添加突出显示的代码以在 SVG 容器上绘制 Sammy the Shark：

process_images/addTextOnImage.js

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

SVG text 元素有四个属性：x、y、text-anchor 和 class。 x 和 y 定义您在 SVG 容器上绘制的文本的位置。 x 属性水平放置文本，y 属性垂直放置文本。

将 x 设置为 50% 将文本绘制在 x 轴上容器的中间，将 y 设置为 50% 将文本定位在中间在 SVG 图像的 y 轴上。

text-anchor 水平对齐文本。将 text-anchor 设置为 middle 将在您指定的 x 坐标的中心对齐文本。

class 在 text 元素上定义一个类名。您将使用类名将 CSS 样式应用于 text 元素。

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

接下来，添加突出显示的代码以使用 CSS 设置文本样式：

process_images/addTextOnImage.js

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

在此代码中，fill 将文本颜色更改为黑色，font-size 更改字体大小，font-weight 更改字体粗细。

至此，您已经编写了使用 SVG 绘制文本 Sammy the Shark 所需的代码。接下来，您将把 SVG 图像保存为 png ，以便您可以看到 SVG 是如何绘制文本的。完成后，您将使用 sammy.png 合成 SVG 图像。

添加突出显示的代码以将 SVG 图像保存为具有清晰的 png：

process_images/addTextOnImage.js

    ....
    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() 从 SVG 图像创建一个 Buffer 对象。缓冲区是内存中存储二进制数据的临时空间。

创建缓冲区对象后，您将创建一个 sharp 实例，并将缓冲区对象作为输入。除了图像路径，sharp 还接受 buffer、Uint9Array 或 Uint8ClampedArray。

最后，将项目目录中的 SVG 图像保存为 svg-image.png。

这是完整的代码：

process_images/addTextOnImage.js

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

保存并退出文件，然后使用以下命令运行脚本：

node addTextOnImage.js

注意： 如果您使用安装 Node.js 选项 2 — 使用 NodeSource PPA 使用 Apt 安装 Node.js 或选项 3 — 使用节点版本管理器安装节点 [X181X ] 并得到错误 fontconfig error: cannot load default config file: no such file: (null)，安装 fontconfig 以生成字体配置文件。

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

sudo apt update
sudo apt install fontconfig

在本地机器上打开 svg-image.png。您现在应该会看到以透明背景呈现的文本 Sammy the Shark：

现在您已经确认 SVG 代码绘制了文本，您将把文本图形合成到 sammy.png 上。

添加以下突出显示的代码以将 SVG 文本图形图像合成到 sammy.png 图像上。

process_images/addTextOnImage.js

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

composite() 方法从 svgBuffer 变量中读取 SVG 图像，并将其定位为距顶部 0 像素，距左边缘 0 像素sammy.png。接下来，将合成图像保存为 sammy-text-overlay.png。

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

node addTextOnImage.js

在本地机器上打开 sammy-text-overlay.png。您应该会看到在图像上添加的文本：

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

结论

在本文中，您学习了如何在 Node.js 中使用锐利的方法处理图像。首先，您创建了一个实例来读取图像并使用 metadata() 方法提取图像元数据。然后，您使用 resize() 方法调整图像大小。之后，您使用 format() 方法更改图像类型，并压缩图像。接下来，您继续使用各种锐利的方法来裁剪、灰度、旋转和模糊图像。最后，您使用 composite() 方法合成图像，并在图像上添加文本。

有关其他锐化方法的更多信息，请访问锐化文档。如果你想继续学习 Node.js，请参阅 Node.js 系列中的如何编码。

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

介绍

先决条件

第 1 步 — 设置项目目录并下载图像

第 2 步 — 读取图像并输出元数据

第 3 步 — 调整大小、更改图像格式和压缩图像

第 4 步 — 裁剪图像并将其转换为灰度

第 5 步 — 旋转和模糊图像

第 6 步 — 使用 composite() 合成图像

第 7 步 — 在图像上添加文本

结论

第 6 步 — 使用 `composite()` 合成图像