Trabajo con imágenes en TypeScript: bibliotecas y herramientas

Trabajo con imágenes en TypeScript: bibliotecas y herramientas

TypeScript es un potente lenguaje de programación que extiende JavaScript con tipado estático. Al desarrollar aplicaciones web modernas, a menudo surge la necesidad de procesar imágenes: cambiar tamaños, convertir formatos, aplicar filtros o analizar píxeles. En este artículo, revisaremos las principales bibliotecas y herramientas para trabajar con imágenes en TypeScript, sus capacidades y ejemplos de uso.

Bibliotecas populares para el procesamiento de imágenes

Existen varias bibliotecas populares que se integran perfectamente con TypeScript. Veamos cada una de ellas en detalle.

Sharp

Sharp es una biblioteca de alto rendimiento para el procesamiento de imágenes, basada en el módulo nativo libvips. Es ideal para aplicaciones de servidor en Node.js. Sharp admite múltiples formatos (JPEG, PNG, WebP, AVIF, TIFF) y permite realizar operaciones con un consumo mínimo de memoria.

Ejemplo de uso con TypeScript:

import sharp from 'sharp';

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

// UsoresizeImage('input.jpg', 'output.jpg', 800, 600);

Principales capacidades de Sharp:

• Redimensionado y recorte
• Conversión de formatos
• Superposición de marcas de agua
• Rotación y reflexión
• Control de calidad de compresión

Jimp

Jimp (Programa de Manipulación de Imágenes en JavaScript) es una biblioteca puramente en JavaScript que no requiere dependencias nativas. Funciona tanto en Node.js como en el navegador. Jimp es más fácil de instalar, pero más lento que Sharp al procesar archivos grandes.

Ejemplo de trabajo con Jimp en TypeScript:

import Jimp from 'jimp';

async function applyFilter(imagePath: string, outputPath: string): Promise<void> {  const image = await Jimp.read(imagePath);    image    .resize(300, Jimp.AUTO) // Mantiene las proporciones    .greyscale()            // Convierte a escala de grises    .contrast(0.5)          // Aumenta el contraste    .write(outputPath);      console.log('Filtro aplicado');}

applyFilter('photo.jpg', 'photo-edited.jpg');

Capacidades de Jimp:

• Operaciones básicas: resize, crop, rotate
• Efectos de color: sepia, greyscale, brightness
• Trabajo con transparencia y superposición de texto
• Soporte para más de 20 formatos de imagen

Canvas API para aplicaciones de navegador

Si estás desarrollando una aplicación cliente en TypeScript, puedes usar la Canvas API integrada. No es una biblioteca, sino una interfaz web estándar para dibujar y procesar imágenes. TypeScript proporciona tipos para todos los métodos de Canvas.

Ejemplo de carga y procesamiento de imagen en Canvas:

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas no es compatible');  }    const img = new Image();  img.onload = () => {    canvas.width = img.width / 2;    canvas.height = img.height / 2;        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);        // Aplicamos efecto de desenfoque    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // Obtenemos datos de píxeles    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('Primer píxel:', imageData.data.slice(0, 4));  };