Processamento e edição de imagens em TypeScript: Jimp, Sharp, Canvas

Trabalho com imagens em TypeScript: visão geral das bibliotecas Jimp, Sharp e Canvas

TypeScript é uma ferramenta poderosa para desenvolvimento server-side e client-side. Quando surge a necessidade de processar imagens (redimensionar, aplicar filtros, converter formatos), bibliotecas especializadas vêm em socorro. Neste artigo, veremos três soluções populares: Jimp, Sharp e Canvas. Você aprenderá como instalar cada uma delas e verá exemplos práticos de código em TypeScript.

1. Jimp — JavaScript puro, sem dependências nativas

Jimp (JavaScript Image Manipulation Program) funciona exclusivamente em JavaScript, portanto não requer a instalação de bibliotecas de sistema adicionais. É a escolha ideal se você precisa de compatibilidade entre plataformas e simplicidade.

Instalação

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

Exemplo: redimensionamento e aplicação de sépia

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {    const image = await Jimp.read(inputPath);    image        .resize(300, 200)        // largura 300, altura 200        .sepia()                 // efeito sépia        .quality(80)             // qualidade JPEG        .writeAsync(outputPath);    console.log('Pronto!');}

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

Jimp suporta várias operações: corte, rotação, sobreposição de texto, ajuste de brilho/contraste, filtros (greyscale, sepia, blur). Todos os métodos retornam uma instância de Jimp, permitindo encadeamento de chamadas.

2. Sharp — desempenho máximo

Sharp utiliza a biblioteca nativa libvips, escrita em C. Isso o torna uma das ferramentas mais rápidas para processamento de imagens em Node.js. Sharp é ideal para servidores de alta carga e pipelines de processamento.

Instalação

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

Exemplo: conversão para WebP e redimensionamento

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {    await sharp(inputPath)        .resize(800, 600, { fit: 'cover' })  // corte para caber no tamanho        .webp({ quality: 85 })               // formato WebP        .toFile(outputPath);    console.log('Conversão concluída');}

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

Sharp também pode extrair metadados (EXIF), girar a imagem com base na orientação do EXIF, aplicar desfoque, alterar o espaço de cores e trabalhar com buffers sem gravar em disco.

Trabalho com 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 processado');});

3. Canvas (node-canvas) — desenho e texto

A biblioteca Canvas (node-canvas) fornece uma API semelhante ao HTML5 Canvas. Ela é indispensável quando você precisa desenhar um gráfico, criar uma imagem do zero ou sobrepor texto complexo.

Instalação

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

Atenção: node-canvas requer a instalação de dependências do sistema (Cairo, Pango, libjpeg). Detalhes na documentação oficial.

Exemplo: criação de imagem com texto

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

async function