Cómo procesar imágenes en Node.js con Sharp

El autor seleccionó el Fondo de Diversidad en Tecnología para recibir una donación como parte del programa Escribe para Donaciones.

Introducción

El procesamiento digital de imágenes es un método que utiliza una computadora para analizar y manipular imágenes. El proceso implica leer una imagen, aplicar métodos para alterar o mejorar la imagen y luego guardar la imagen procesada. Es común en aplicaciones que manejan contenido subido por usuarios procesar imágenes. Por ejemplo, si estás desarrollando una aplicación web que permite a los usuarios subir imágenes, los usuarios pueden subir imágenes innecesariamente grandes. Esto puede afectar negativamente la velocidad de carga de la aplicación y también desperdiciar el espacio en tu servidor. Con el procesamiento de imágenes, tu aplicación puede redimensionar y comprimir todas las imágenes subidas por los usuarios, lo que puede mejorar significativamente el rendimiento de tu aplicación y ahorrar espacio en disco en tu servidor.

Node.js tiene un ecosistema de bibliotecas que puedes utilizar para procesar imágenes, como sharp, jimp y el módulo gm. Este artículo se centrará en el módulo sharp. sharp es una popular biblioteca de procesamiento de imágenes para Node.js que admite varios formatos de archivo de imagen, como JPEG, PNG, GIF, WebP, AVIF, SVG y TIFF.

En este tutorial, usarás sharp para leer una imagen y extraer sus metadatos, cambiar el tamaño, cambiar el formato de una imagen y comprimir una imagen. Luego, recortarás, convertirás a escala de grises, rotarás y desenfocarás una imagen. Finalmente, compondrás imágenes y agregarás texto en una imagen. Al final de este tutorial, tendrás una buena comprensión de cómo procesar imágenes en Node.js.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Configuración de Node.js en tu entorno de desarrollo local. Puedes seguir Cómo instalar Node.js y crear un entorno de desarrollo local para aprender cómo instalar Node.js y npm en tu sistema.

• Conocimientos básicos sobre cómo escribir y ejecutar un programa en Node.js. Puedes seguir Cómo escribir y ejecutar tu primer programa en Node.js para aprender lo básico.

• Comprensión básica de la programación asincrónica en JavaScript. Sigue Comprendiendo el ciclo de eventos, devoluciones de llamada, promesas y async/await en JavaScript para repasar la programación asincrónica.

Paso 1 — Configuración del Directorio del Proyecto y Descarga de Imágenes

Antes de comenzar a escribir tu código, necesitas crear el directorio que contendrá el código y las imágenes que utilizarás en este artículo.

Abre tu terminal y crea el directorio para el proyecto usando el comando mkdir:

mkdir process_images

Ingresa al directorio recién creado usando el comando cd:

cd process_images

Crea un archivo package.json utilizando el comando npm init para llevar un seguimiento de las dependencias del proyecto:

npm init -y

La opción -y indica a npm que cree el archivo package.json predeterminado.

A continuación, instala sharp como dependencia:

npm install sharp

Utilizarás las siguientes tres imágenes en este tutorial:

A continuación, descargue las imágenes en el directorio de su proyecto usando el comando curl.

Utilice el siguiente comando para descargar la primera imagen. Esto descargará la imagen como sammy.png:

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

Luego, descargue la segunda imagen con el siguiente comando. Esto descargará la imagen como underwater.png:

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

Finalmente, descargue la tercera imagen usando el siguiente comando. Esto descargará la imagen como sammy-transparent.png:

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

Con el directorio del proyecto y las dependencias configuradas, ahora está listo para comenzar a procesar imágenes.

Paso 2 — Leyendo Imágenes y Generando Metadatos

En esta sección, escribirá código para leer una imagen y extraer su metadatos. Los metadatos de la imagen son texto incrustado en una imagen, que incluye información sobre la imagen, como su tipo, ancho y alto.

Para extraer los metadatos, primero importarás el módulo sharp, crearás una instancia de sharp y pasarás la ruta de la imagen como argumento. Después, encadenarás el método metadata() a la instancia para extraer los metadatos y registrarlos en la consola.

Para hacer esto, crea y abre el archivo readImage.js en tu editor de texto preferido. Este tutorial utiliza un editor de texto de terminal llamado nano:

nano readImage.js

A continuación, requiere sharp en la parte superior del archivo:

const sharp = require("sharp");

sharp es un módulo de procesamiento de imágenes basado en promesas. Cuando creas una instancia de sharp, devuelve una promesa. Puedes resolver la promesa usando el método then o usar async/await, que tiene una sintaxis más limpia.

Para usar la sintaxis de async/await, necesitarás crear una función asincrónica colocando la palabra clave async al principio de la función. Esto te permitirá usar la palabra clave await dentro de la función para resolver la promesa devuelta cuando lees una imagen.

En tu archivo readImage.js, define una función asincrónica, getMetadata(), para leer la imagen, extraer sus metadatos y registrarlos en la consola:

const sharp = require("sharp");

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

getMetadata() es una función asíncrona dada la palabra clave async que has definido antes de la etiqueta function. Esto te permite usar la sintaxis await dentro de la función. La función getMetadata() leerá una imagen y devolverá un objeto con sus metadatos.

Dentro del cuerpo de la función, lees la imagen llamando a sharp(), que toma la ruta de la imagen como argumento, aquí con sammy.png.

Además de tomar una ruta de imagen, sharp() también puede leer datos de imagen almacenados en un Buffer, Uint8Array o Uint8ClampedArray siempre que la imagen sea JPEG, PNG, GIF, WebP, AVIF, SVG o TIFF.

Ahora, cuando usas sharp() para leer la imagen, crea una instancia de sharp. Luego encadenas el método metadata() del módulo sharp a la instancia. El método devuelve un objeto que contiene los metadatos de la imagen, que almacenas en la variable metadata y registras su contenido usando console.log().

Ahora tu programa puede leer una imagen y devolver sus metadatos. Sin embargo, si el programa arroja un error durante la ejecución, se bloqueará. Para evitar esto, necesitas capturar los errores cuando ocurran.

Para hacer eso, envuelve el código dentro de la función getMetadata() dentro de un bloque 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}`);
  }
}

Dentro del bloque try, lees una imagen, extraes y registras sus metadatos. Cuando ocurre un error durante este proceso, la ejecución salta a la sección catch y registra el error, evitando que el programa se bloquee.

Finalmente, llama a la función getMetadata() agregando la línea resaltada:

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

Ahora, guarda y sale del archivo. Ingresa y para guardar los cambios que hiciste en el archivo y confirma el nombre del archivo presionando la tecla ENTER o RETURN.

Ejecuta el archivo usando el comando node:

node readImage.js

Deberías ver una salida similar a esta:

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

Ahora que has leído una imagen y extraído sus metadatos, ahora redimensionarás una imagen, cambiarás su formato y la comprimirás.

Paso 3 — Redimensionar, Cambiar el Formato de la Imagen y Comprimir Imágenes

Redimensionar es el proceso de alterar las dimensiones de una imagen sin recortar nada de ella, lo que afecta el tamaño del archivo de imagen. En esta sección, redimensionarás una imagen, cambiarás su tipo de imagen y comprimirás la imagen. La compresión de imágenes es el proceso de reducir el tamaño del archivo de una imagen sin perder calidad.

Primero, encadenarás el método resize() desde la instancia sharp para redimensionar la imagen y guardarla en el directorio del proyecto. Segundo, encadenarás el método format() a la imagen redimensionada para cambiar su formato de png a jpeg. Además, pasarás una opción al método format() para comprimir la imagen y guardarla en el directorio.

Crea y abre el archivo resizeImage.js en tu editor de texto:

nano resizeImage.js

Agrega el siguiente código para redimensionar la imagen a un ancho de 150px y una altura de 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 función resizeImage() encadena el método resize() del módulo sharp a la instancia sharp. El método toma un objeto como argumento. En el objeto, estableces las dimensiones de la imagen que deseas usando las propiedades width y height. Establecer width en 150 y height en 97 hará que la imagen tenga un ancho de 150px y una altura de 97px.

Después de redimensionar la imagen, encadenas el método toFile() del módulo sharp, que toma la ruta de la imagen como argumento. Pasar sammy-resized.png como argumento guardará el archivo de imagen con ese nombre en el directorio de trabajo de tu programa.

Ahora, guarda y cierra el archivo. Ejecuta tu programa en la terminal:

node resizeImage.js

No obtendrás ninguna salida, pero deberías ver un nuevo archivo de imagen creado con el nombre sammy-resized.png en el directorio del proyecto.

Abra la imagen en su máquina local. Debería ver una imagen de Sammy 150px de ancho y 97px de alto:

Ahora que puede redimensionar una imagen, a continuación convertirá el formato de imagen redimensionada de png a jpeg, comprimirá la imagen y la guardará en el directorio de trabajo. Para hacerlo, utilizará el método toFormat(), que encadenará después del método resize().

Agregue el código resaltado para cambiar el formato de la imagen a jpeg y comprimirla:

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

Dentro de la función resizeImage(), utiliza el método toFormat() del módulo sharp para cambiar el formato de la imagen y comprimirla. El primer argumento del método toFormat() es una cadena que contiene el formato de imagen al que desea convertir su imagen. El segundo argumento es un objeto opcional que contiene opciones de salida que mejoran y comprimen la imagen.

Para comprimir la imagen, pase una propiedad mozjpeg que contenga un valor booleano. Cuando lo establece en true, sharp utiliza los valores predeterminados de mozjpeg para comprimir la imagen sin sacrificar calidad. El objeto también puede tomar más opciones; consulte la documentación de sharp para obtener más detalles.

A continuación, pasas el método toFile() un nombre de archivo diferente para guardar la imagen comprimida como sammy-resized-compressed.jpeg.

Ahora, guarda y cierra el archivo, luego ejecuta tu código con el siguiente comando:

node resizeImage.js

No recibirás ninguna salida, pero un archivo de imagen sammy-resized-compressed.jpeg se guardará en el directorio de tu proyecto.

Abre la imagen en tu máquina local y verás la siguiente imagen:

Con tu imagen ahora comprimida, verifica el tamaño del archivo para confirmar que la compresión fue exitosa. En tu terminal, ejecuta el comando du para verificar el tamaño del archivo sammy.png:

du -h sammy.png

La opción -h produce una salida legible por humanos que te muestra el tamaño del archivo en kilobytes, megabytes y muchos más.

Después de ejecutar el comando, deberías ver una salida similar a esta:

Output
120K    sammy.png

La salida muestra que la imagen original es de 120 kilobytes.

A continuación, verifica el tamaño del archivo para sammy-resized.png:

du -h sammy-resized.png

Después de ejecutar el comando, verás la siguiente salida:

Output
8.0K     sammy-resized.png

El archivo sammy-resized.png ahora tiene 8 kilobytes, frente a los 120 kilobytes originales. Esto muestra que la operación de redimensionamiento afecta el tamaño del archivo.

Ahora, verifica el tamaño del archivo sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

Después de ejecutar el comando, verás el siguiente resultado:

Output
4.0K    sammy-resized-compressed.jpeg

El archivo sammy-resized-compressed.jpeg ahora tiene 4 kilobytes, bajando desde los 8 kilobytes originales, lo que te ahorra 4 kilobytes y muestra que la compresión funcionó.

Ahora que has redimensionado una imagen, cambiado su formato y comprimido, recortarás y convertirás la imagen a escala de grises.

Paso 4 — Recortar y Convertir Imágenes a Escala de Grises

En este paso, recortarás una imagen y la convertirás a escala de grises. El recorte es el proceso de eliminar áreas no deseadas de una imagen. Usarás el método extend() para recortar la imagen sammy.png. Después de eso, encadenarás el método grayscale() a la instancia de la imagen recortada y la convertirás a escala de grises.

Crea y abre cropImage.js en tu editor de texto:

nano cropImage.js

En tu archivo cropImage.js, agrega el siguiente código para recortar la imagen:

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 función cropImage() es una función asíncrona que lee una imagen y devuelve tu imagen recortada. Dentro del bloque try, una instancia de sharp leerá la imagen. Luego, el método extract() del módulo sharp encadenado a la instancia toma un objeto con las siguientes propiedades:

• width: el ancho del área que deseas recortar.
• height: la altura del área que deseas recortar.
• top: la posición vertical del área que deseas recortar.
• left: la posición horizontal del área que deseas recortar.

Cuando estableces el width en 500 y el height en 330, imagina que sharp crea una caja transparente encima de la imagen que deseas recortar. Cualquier parte de la imagen que quepa en la caja permanecerá, y el resto se recortará:

Las propiedades top y left controlan la posición de la caja. Cuando estableces left en 120, la caja se posiciona a 120px del borde izquierdo de la imagen, y establecer top en 70 posiciona la caja a 70px del borde superior de la imagen.

El área de la imagen que cabe dentro de la caja será extraída y guardada en sammy-cropped.png como una imagen separada.

Guarda y sal del archivo. Ejecuta el programa en la terminal:

node cropImage.js

La salida no se mostrará pero la imagen sammy-cropped.png se guardará en el directorio de tu proyecto.

Abre la imagen en tu máquina local. Deberías ver la imagen recortada:

Ahora que has recortado una imagen, convertirás la imagen a escala de grises. Para hacerlo, encadenarás el método grayscale a la instancia sharp. Agrega el código resaltado para convertir la imagen a escala de grises:

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 función cropImage() convierte la imagen recortada a escala de grises encadenando el método grayscale() del módulo sharp a la instancia sharp. Luego guarda la imagen en el directorio del proyecto como sammy-cropped-grayscale.png.

Pulsa CTRL+X para guardar y salir del archivo.

Ejecuta tu código en la terminal:

node cropImage.js

Abre sammy-cropped-grayscale.png en tu máquina local. Ahora deberías ver la imagen en escala de grises:

Ahora que has recortado y extraído la imagen, trabajarás con rotarla y desenfocarla.

Paso 5 — Rotación y Desenfoque de Imágenes

En este paso, rotarás la imagen sammy.png a un ángulo de 33 grados. También aplicarás un desenfoque gaussiano a la imagen rotada. Un desenfoque gaussiano es una técnica para desenfocar una imagen utilizando la función Gaussiana, que reduce el nivel de ruido y los detalles en una imagen.

Crea un archivo rotateImage.js en tu editor de texto:

nano rotateImage.js

En tu archivo rotateImage.js, escribe el siguiente bloque de código para crear una función que rote sammy.png a un ángulo de 33 grados:

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 función rotateImage() es una función asíncrona que lee una imagen y devolverá la imagen rotada a un ángulo de 33 grados. Dentro de la función, el método rotate() del módulo sharp recibe dos argumentos. El primer argumento es el ángulo de rotación de 33 grados. Por defecto, sharp hace que el fondo de la imagen rotada sea negro. Para eliminar el fondo negro, pasas un objeto como segundo argumento para hacer que el fondo sea transparente.

El objeto tiene una propiedad background que contiene un objeto que define el modelo de color RGBA. RGBA significa rojo, verde, azul y alfa.

• r: controla la intensidad del color rojo. Acepta un valor entero de 0 a 255. 0 significa que el color no se está utilizando y 255 es el rojo en su máximo.

• g: controla la intensidad del color verde. Acepta un valor entero de 0-255. 0 significa que el color verde no se está utilizando y 255 es el verde en su máximo.

• b: controla la intensidad del azul. También acepta un valor entero entre 0 y 255. 0 significa que el color azul no se está utilizando y 255 es el azul en su máximo.

• alpha: controla la opacidad del color definido por las propiedades r, g y b. 0 o 0.0 hace que el color sea transparente y 1 o 1.1 hace que el color sea opaco.

Para que la propiedad alpha funcione, debes asegurarte de definir y establecer los valores para r, g y b. Establecer los valores de r, g y b en 0 crea un color negro. Para crear un fondo transparente, primero debes definir un color, luego puedes establecer alpha en 0 para hacerlo transparente.

Ahora, guarda y sale del archivo. Ejecuta tu script en la terminal:

node rotateImage.js

Comprueba la existencia de sammy-rotated.png en el directorio de tu proyecto. Ábrelo en tu máquina local.

Deberías ver la imagen rotada a un ángulo de 33 grados:

A continuación, difuminarás la imagen rotada. Lograrás eso encadenando el método blur() a la instancia de sharp.

Ingresa el código resaltado a continuación para difuminar la imagen:

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 función rotateImage() ahora lee la imagen, la rota y aplica un desenfoque gaussiano a la imagen. Aplica un desenfoque gaussiano a la imagen utilizando el método blur() del módulo sharp. El método acepta un único argumento que contiene un valor sigma entre 0.3 y 1000. Pasarle 4 aplicará un desenfoque gaussiano con un valor sigma de 4. Después de que la imagen esté desenfocada, defines una ruta para guardar la imagen desenfocada.

El script ahora desenfocará la imagen rotada con un valor sigma de 4. Guarda y sale del archivo, luego ejecuta el script en tu terminal:

node rotateImage.js

Después de ejecutar el script, abre el archivo sammy-rotated-blurred.png en tu máquina local. Ahora deberías ver la imagen rotada y desenfocada:

Ahora que has rotado y desenfocado una imagen, compondrás una imagen sobre otra.

Paso 6 — Composición de Imágenes Usando composite()

La composición de imágenes es un proceso de combinar dos o más imágenes separadas para crear una sola imagen. Esto se hace para crear efectos que tomen los mejores elementos de diferentes fotos. Otro caso de uso común es agregar una marca de agua a una imagen con un logotipo.

En esta sección, compondrás sammy-transparent.png sobre underwater.png. Esto creará una ilusión de Sammy nadando en lo profundo del océano. Para componer las imágenes, encadenarás el método composite() a la instancia de sharp.

Crea y abre el archivo compositeImage.js en tu editor de texto:

nano compositeImages.js

Ahora, crea una función para componer las dos imágenes agregando el siguiente código en el archivo 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 función compositeImages() lee primero la imagen underwater.png. Luego, encadenas el método composite() del módulo sharp, que toma un array como argumento. El array contiene un único objeto que lee la imagen sammy-transparent.png. El objeto tiene las siguientes propiedades:

• input: toma la ruta de la imagen que deseas componer sobre la imagen procesada. También acepta un Buffer, Uint8Array, o Uint8ClampedArray como entrada.
• top: controla la posición vertical de la imagen que deseas componer. Establecer top en 50 desplaza la imagen sammy-transparent.png 50px desde el borde superior de la imagen underwater.png.
• left: controla la posición horizontal de la imagen que deseas componer sobre otra. Establecer left en 50 desplaza la imagen sammy-transparent.png 50px desde el borde izquierdo de la imagen underwater.png.

El método composite() requiere una imagen de tamaño similar o más pequeña que la imagen procesada.

Para visualizar lo que hace el método composite(), piensa en él como si estuviera creando una pila de imágenes. La imagen sammy-transparent.png se coloca encima de la imagen underwater.png:

Los valores de top y left posicionan la imagen sammy-transparent.png en relación con la imagen underwater.png.

Guarda tu script y sale del archivo. Ejecuta tu script para crear una composición de imágenes:

node compositeImages.js

Abre sammy-underwater.png en tu máquina local. Ahora deberías ver la imagen sammy-transparent.png compuesta sobre la imagen underwater.png:

Ahora has compuesto imágenes usando el método composite(). En el siguiente paso, usarás el método composite() para agregar texto a una imagen.

Paso 7 — Agregar texto en una imagen

En este paso, escribirás texto en una imagen. En el momento de escribir, sharp no tiene una forma nativa de agregar texto a una imagen. Para agregar texto, primero escribirás código para dibujar texto usando Scalable Vector Graphics (SVG). Una vez que hayas creado la imagen SVG, escribirás código para componer la imagen con la imagen sammy.png usando el método composite.

SVG es un lenguaje de marcado basado en XML para crear gráficos vectoriales para la web. Puedes dibujar texto o formas como círculos, triángulos, así como dibujar formas complejas como ilustraciones, logotipos, etc. Las formas complejas se crean con una herramienta gráfica como Inkscape que genera el código SVG. Las formas SVG se pueden renderizar y escalar a cualquier tamaño sin perder calidad.

Crea y abre el archivo addTextOnImage.js en tu editor de texto.

nano addTextOnImage.js

En tu archivo addTextOnImage.js, agrega el siguiente código para crear un contenedor 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 función addTextOnImage() define cuatro variables: width, height, text y svgImage. width contiene el entero 750, y height contiene el entero 483. text contiene la cadena Sammy the Shark. Este es el texto que dibujarás usando SVG.

La variable svgImage contiene el elemento svg. El elemento svg tiene dos atributos: width y height que interpolan las variables width y height que definiste anteriormente. El elemento svg crea un contenedor transparente según el ancho y la altura dados.

Le diste al elemento svg un width de 750 y un height de 483 para que la imagen SVG tenga el mismo tamaño que sammy.png. Esto ayudará a que el texto se vea centrado en la imagen sammy.png.

A continuación, dibujarás los gráficos de texto. Agrega el código resaltado para dibujar Sammy the Shark en el contenedor SVG:

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

El elemento text del SVG tiene cuatro atributos: x, y, text-anchor y class. x y y definen la posición del texto que estás dibujando en el contenedor SVG. El atributo x posiciona el texto horizontalmente y el atributo y posiciona el texto verticalmente.

Establecer x en 50% dibuja el texto en el centro del contenedor en el eje x, y establecer y en 50% posiciona el texto en el centro en el eje y de la imagen SVG.

El atributo text-anchor alinea el texto horizontalmente. Establecer text-anchor en middle alineará el texto en el centro en la coordenada x que especificaste.

class define un nombre de clase en el elemento text. Utilizarás el nombre de clase para aplicar estilos CSS al elemento text.

${text} interpola la cadena Sammy the Shark almacenada en la variable text. Este es el texto que se dibujará en la imagen SVG.

A continuación, añade el código resaltado para estilizar el texto 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>
    `;

En este código, fill cambia el color del texto a negro, font-size cambia el tamaño de fuente, y font-weight cambia el peso de la fuente.

En este punto, has escrito el código necesario para dibujar el texto Sammy the Shark con SVG. A continuación, guardarás la imagen SVG como un png con sharp para que puedas ver cómo SVG está dibujando el texto. Una vez hecho esto, compondrás la imagen SVG con sammy.png.

Añade el código resaltado para guardar la imagen SVG como 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 objeto Buffer a partir de la imagen SVG. Un buffer es un espacio temporal en la memoria que almacena datos binarios.

Después de crear el objeto de búfer, creas una instancia sharp con el objeto de búfer como entrada. Además de una ruta de imagen, sharp también acepta un búfer, Uint9Array, o Uint8ClampedArray.

Finalmente, guarda la imagen SVG en el directorio del proyecto como svg-image.png.

Aquí está el código 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()

Guarda y sale del archivo, luego ejecuta tu script con el siguiente comando:

node addTextOnImage.js

sudo apt update
sudo apt install fontconfig

Abra svg-image.png en su máquina local. Ahora debería ver el texto Sammy the Shark renderizado con un fondo transparente:

Ahora que ha confirmado que el código SVG dibuja el texto, va a componer los gráficos de texto en sammy.png.

Agregue el siguiente código resaltado para componer la imagen de gráficos de texto SVG en la imagen 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();

El método composite() lee la imagen SVG de la variable svgBuffer y la posiciona a 0 píxeles desde la parte superior y 0 píxeles desde el borde izquierdo de sammy.png. Luego, guarde la imagen compuesta como sammy-text-overlay.png.

Guarde y cierre su archivo, luego ejecute su programa usando el siguiente comando:

node addTextOnImage.js

Abra sammy-text-overlay.png en su máquina local. Debería ver texto agregado sobre la imagen:

Ahora ha utilizado el método composite() para agregar texto creado con SVG en otra imagen.

Conclusión

En este artículo, aprendiste cómo usar métodos afilados para procesar imágenes en Node.js. Primero, creaste una instancia para leer una imagen y usaste el método metadata() para extraer los metadatos de la imagen. Luego, utilizaste el método resize() para cambiar el tamaño de una imagen. Después, empleaste el método format() para cambiar el tipo de imagen y comprimirla. A continuación, procediste a usar varios métodos afilados para recortar, convertir a escala de grises, rotar y desenfocar una imagen. Finalmente, usaste el método composite() para componer una imagen y agregar texto a una imagen.

Para obtener más información sobre métodos afilados adicionales, visita la documentación de sharp. Si deseas seguir aprendiendo Node.js, consulta la serie Cómo Codificar en Node.js.