Procesamiento y edición de imágenes en TypeScript: Jimp, Sharp, Canvas

Trabajo con imágenes en TypeScript: revisión de las bibliotecas Jimp, Sharp y Canvas

TypeScript es una herramienta potente para el desarrollo tanto del lado del servidor como del cliente. Cuando surge la necesidad de procesar imágenes (cambiar tamaño, aplicar filtros, convertir formatos), las bibliotecas especializadas vienen al rescate. En este artículo, analizaremos tres soluciones populares: Jimp, Sharp y Canvas. Aprenderá cómo instalar cada una de ellas y verá ejemplos de código funcionales en TypeScript.

1. Jimp — JavaScript puro, sin dependencias nativas

Jimp (JavaScript Image Manipulation Program) funciona exclusivamente con JavaScript, por lo que no requiere la instalación de bibliotecas de sistema adicionales. Es la elección ideal si necesita multiplataforma y simplicidad.

Instalación

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

Ejemplo: cambio de tamaño y aplicación de sepia

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {    const image = await Jimp.read(inputPath);    image        .resize(300, 200)        // ancho 300, alto 200        .sepia()                 // efecto sepia        .quality(80)             // calidad JPEG        .writeAsync(outputPath);    console.log('¡Listo!');}

processImage('input.jpg', 'output.jpg').catch(console.error);

Jimp admite múltiples operaciones: recorte, rotación, superposición de texto, cambio de brillo/contraste, filtros (greyscale, sepia, blur). Todos los métodos devuelven una instancia de Jimp, lo que permite construir cadenas de llamadas.

2. Sharp — máximo rendimiento

Sharp utiliza la biblioteca nativa libvips, escrita en C. Esto lo convierte en una de las herramientas más rápidas para el procesamiento de imágenes en Node.js. Sharp es ideal para servidores de alta carga y pipelines de procesamiento.

Instalación

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

Ejemplo: conversión a WebP y redimensionamiento

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {    await sharp(inputPath)        .resize(800, 600, { fit: 'cover' })  // recorte para ajustar al tamaño        .webp({ quality: 85 })               // formato WebP        .toFile(outputPath);    console.log('Conversión completada');}

convertToWebP('photo.png', 'photo.webp').catch(console.error);

Sharp también puede extraer metadatos (EXIF), rotar la imagen según la orientación de EXIF, aplicar desenfoque, cambiar el espacio de color y trabajar con buffers sin escribir en el disco.

Trabajo con buffer

import sharp from 'sharp';import fs from 'fs';

async function processBuffer(inputBuffer: Buffer): Promise<Buffer> {    return await sharp(inputBuffer)        .resize(200, 200)        .jpeg({ quality: 70 })        .toBuffer();}

const raw = fs.readFileSync('large.jpg');processBuffer(raw).then(smallBuffer => {    fs.writeFileSync('small.jpg', smallBuffer);    console.log('Buffer procesado');});

3. Canvas (node-canvas) — dibujo y texto

La biblioteca Canvas (node-canvas) proporciona una API similar a la de HTML5 Canvas. Es indispensable cuando necesita dibujar un gráfico, crear una imagen desde cero o superponer texto complejo.

Instalación

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

Atención: node-canvas requiere la instalación de dependencias del sistema (Cairo, Pango, libjpeg). Consulte la documentación oficial para más detalles.

Ejemplo: creación de una imagen con texto

import { createCanvas, loadImage, registerFont } from 'canvas';import fs from 'fs';

async function