Trabajo con imágenes en TypeScript: bibliotecas, herramientas y ejemplos de código

Trabajo con imágenes en TypeScript: reseña completa de herramientas y bibliotecas

TypeScript es un lenguaje potente para el desarrollo de servidor y cliente, que se utiliza a menudo para el procesamiento de imágenes. En este artículo revisaremos las principales bibliotecas y herramientas para trabajar con imágenes en TypeScript, incluyendo instalación, configuración y ejemplos prácticos de código.

El procesamiento de imágenes puede ser necesario en proyectos muy diversos: desde aplicaciones web hasta servicios backend. TypeScript añade tipado estricto, lo que simplifica el desarrollo de algoritmos complejos y reduce la cantidad de errores.

Bibliotecas populares para trabajar con imágenes

• Sharp — biblioteca de alto rendimiento para Node.js, escrita en C++. Ideal para procesamiento del lado del servidor: redimensionamiento, compresión, conversión de formatos.
• Jimp — biblioteca puramente JavaScript, que no requiere dependencias nativas. Adecuada para operaciones simples y soluciones multiplataforma.
• Canvas — implementación de HTML5 Canvas para Node.js. Permite dibujar, superponer texto, crear composiciones complejas.
• Pica — biblioteca para redimensionamiento de imágenes de alta calidad en el navegador y Node.js.

Instalación y configuración de Sharp en TypeScript

Sharp es una de las bibliotecas más rápidas para el procesamiento de imágenes. La instalación se realiza a través de npm:

npm install sharpnpm install @types/sharp --save-dev

Después de la instalación, se puede importar la biblioteca en un archivo TypeScript:

import sharp from 'sharp';

const resizeImage = async (  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> => {  try {    await sharp(inputPath)      .resize(width, height)      .toFile(outputPath);    console.log('Imagen redimensionada exitosamente');  } catch (error) {    console.error('Error al redimensionar:', error);  }};

Trabajo con Jimp: manipulaciones simples

Jimp no requiere dependencias nativas y es ideal para operaciones simples. Instalación:

npm install jimpnpm install @types/jimp --save-dev

Ejemplo de cambio de brillo y contraste con Jimp:

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {  const image = await Jimp.read(inputPath);    image    .brightness(0.2)    // Aumentar brillo en un 20%    .contrast(0.1)      // Aumentar contraste en un 10%    .write(outputPath);    console.log('Imagen procesada');};

Canvas: creación de imágenes desde cero

La biblioteca Canvas permite crear imágenes programáticamente, dibujar formas, superponer texto. Instalación:

npm install canvasnpm install @types/node --save-dev

Ejemplo de creación de una imagen simple con texto:

import { createCanvas, loadImage } from 'canvas';import * as fs from 'fs';

const createTextImage = async (  text: string,  outputPath: string): Promise<void> => {  const width = 800;  const height = 200;  const canvas = createCanvas(width, height);  const ctx = canvas.getContext('2d');

  // Relleno de fondo  ctx.fillStyle = '#4a90d9';  ctx.fillRect(0, 0, width, height);

  // Configuración del texto  ctx.font = 'bold 48px Arial';  ctx.fillStyle = '#ffffff';  ctx.textAlign = 'center';  ctx.textBaseline = 'middle';

  // Dibujamos el texto  ctx.fillText(text, width / 2, height / 2);

  // Guardamos en archivo  const buffer = canvas.toBuffer('image/png');  fs.writeFileSync(outputPath, buffer);  console.log('Imagen creada');};

Compresión de imágenes manteniendo la calidad

La optimización de imágenes es una tarea crítica para proyectos web. Sharp permite ajustar finamente los parámetros de compresión: