Trabajo con imágenes: resize, crop en TypeScript

Trabajo con imágenes en TypeScript: cambio de tamaño (resize) y recorte (crop)

En el desarrollo web moderno, el procesamiento de imágenes del lado del cliente es una tarea común. TypeScript, gracias a su tipado estricto e integración con las APIs modernas del navegador, permite realizar operaciones resize (cambio de tamaño) y crop (recorte) de forma segura y eficiente. En este artículo analizaremos dos enfoques: el uso de la Canvas API nativa y el trabajo con las librerías de servidor sharp y jimp para Node.js.

1. Canvas API: procesamiento del lado del cliente sin dependencias

El HTMLCanvasElement del navegador es la forma más sencilla de manipular imágenes. No requiere instalar paquetes adicionales y funciona en cualquier navegador moderno.

1.1. Cambio de tamaño (resize) mediante Canvas

La idea principal es dibujar la imagen original en un canvas con las nuevas dimensiones y luego exportar el resultado.

function resizeImage(  source: HTMLImageElement,  targetWidth: number,  targetHeight: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = targetWidth;    canvas.height = targetHeight;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas context not supported'));      return;    }    // Dibujamos la imagen con las nuevas dimensiones    ctx.drawImage(source, 0, 0, targetWidth, targetHeight);    // Exportamos a Blob (formato por defecto - PNG)    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Failed to create blob'));    }, 'image/jpeg', 0.9); // se puede especificar formato y calidad  });}

Importante: Al aumentar la imagen (upscale), la calidad puede degradarse — canvas utiliza interpolación bilineal. Esto es aceptable para vistas previas, pero no para impresión.

1.2. Recorte (crop) con coordenadas

El recorte requiere especificar un área rectangular de la imagen original.

function cropImage(  source: HTMLImageElement,  x: number,  y: number,  width: number,  height: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = width;    canvas.height = height;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas not supported'));      return;    }    // Recortamos un fragmento de la imagen original    ctx.drawImage(source, x, y, width, height, 0, 0, width, height);    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Blob creation failed'));    }, 'image/png');  });}

Consejo: Siempre verifique que las coordenadas x, y, width, height no excedan los límites de la imagen original, de lo contrario canvas devolverá áreas vacías.

2. Procesamiento del lado del servidor: sharp y jimp

Si trabaja en un entorno Node.js y TypeScript, las librerías sharp (C++ nativo, alto rendimiento) y jimp (JS puro, multiplataforma) son soluciones estándar.

2.1. Instalación e importación

// Instalación// npm install sharp// npm install jimp

import sharp from 'sharp';import Jimp from 'jimp';

2.2. Cambio de tamaño (resize) con sharp

async function resizeWithSharp(  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> {  await sharp(inputPath)    .resize(width, height, {      fit: 'cover',      // 'cover' - recorta el exceso, 'contain' - ajusta      position: 'center' // punto de referencia para el recorte    })    .toFile(outputPath);}

El parámetro fit define la estrategia de ajuste:

• cover —