Trabalho com imagens em TypeScript: redimensionar e recortar com Sharp e Jimp

Trabalho com imagens em TypeScript: redimensionar e recortar

No desenvolvimento web moderno, o processamento de imagens é uma das tarefas mais requisitadas. O TypeScript, graças à sua tipagem forte e integração com Node.js, permite criar ferramentas confiáveis e eficientes para redimensionar (resize) e recortar (crop) imagens. Neste artigo, veremos duas bibliotecas populares: Sharp (processamento no servidor) e Jimp (JavaScript puro), além da abordagem nativa com Canvas API para o navegador.

1. Instalação e configuração do projeto TypeScript

Para começar, crie um projeto e instale as dependências necessárias:

npm init -y\nnpm install typescript @types/node sharp jimp\nnpx tsc --init

No arquivo tsconfig.json, certifique-se de que "module": "commonjs" e "target": "ES2020".

2. Biblioteca Sharp — processamento rápido no servidor

O Sharp usa o módulo nativo libvips e oferece alto desempenho. É adequado para aplicações no servidor (NestJS, Express).

2.1. Redimensionamento (resize) com Sharp

O método resize() aceita largura e altura. Você pode especificar apenas um parâmetro — o segundo será calculado proporcionalmente.

import sharp from 'sharp';\n\nasync function resizeImage(inputPath: string, outputPath: string, width: number, height?: number): Promise<void> {\n  try {\n    await sharp(inputPath)\n      .resize(width, height, {\n        fit: 'cover',       // 'cover', 'contain', 'fill', 'inside', 'outside'\n        position: 'center'  // posição para recorte ao usar cover\n      })\n      .toFile(outputPath);\n    console.log(`Imagem redimensionada: ${outputPath}`);\n  } catch (error) {\n    console.error('Erro no resize:', error);\n  }\n}\n\n// Exemplo de uso\nresizeImage('input.jpg', 'output_800x600.jpg', 800, 600);

2.2. Recorte (crop) com Sharp

O método extract() permite recortar uma área retangular. Parâmetros: left, top, width, height.

async function cropImage(\n  inputPath: string,\n  outputPath: string,\n  left: number,\n  top: number,\n  cropWidth: number,\n  cropHeight: number\n): Promise<void> {\n  try {\n    await sharp(inputPath)\n      .extract({ left, top, width: cropWidth, height: cropHeight })\n      .toFile(outputPath);\n    console.log(`Recorte realizado: ${outputPath}`);\n  } catch (error) {\n    console.error('Erro no crop:', error);\n  }\n}\n\n// Exemplo: recortar o centro 400x400 de uma imagem 800x600\ncropImage('input.jpg', 'cropped_center.jpg', 200, 100, 400, 400);

2.3. Combinando resize e crop

O Sharp permite encadear operações. Por exemplo, primeiro reduzir, depois recortar:

async function resizeAndCrop(inputPath: string, outputPath: string): Promise<void> {\n  await sharp(inputPath)\n    .resize(500, 500, { fit: 'inside' })  // reduz para 500x500 sem recorte\n    .extract({ left: 50, top: 50, width: 400, height: 400 }) // recorta o centro\n    .toFile(outputPath);\n}\n\nresizeAndCrop('input.jpg', 'processed.jpg');

3. Biblioteca Jimp — JavaScript puro sem dependências nativas

O Jimp funciona com JavaScript puro, não requer instalação de bibliotecas de sistema adicionais. É ideal para ambientes isolados (por exemplo, AWS Lambda).

3.1. Instalação do Jimp

npm install jimp\nnpm install @types/jimp  // para TypeScript

3.2. resize com Jimp

import Jimp from 'jimp';\n\nasync function resizeWithJimp(inputPath: string, outputPath: string, width: number, height: number): Promise<void> {\n  try {\n    const image = await Jimp.read(inputPath);\n    image.resize(width, height, Jimp.RESIZE_BILINEAR); // algoritmos: BILINEAR, BICUBIC, NEAREST_NEIGHBOR\n    awa