Trabalhando com imagens em TypeScript: bibliotecas e ferramentas

Trabalhando com imagens em TypeScript: bibliotecas e ferramentas

TypeScript é uma linguagem de programação poderosa que estende o JavaScript com tipagem estática. No desenvolvimento de aplicações web modernas, surge frequentemente a necessidade de processar imagens: redimensionar, converter formatos, aplicar filtros ou analisar pixels. Neste artigo, veremos as principais bibliotecas e ferramentas para trabalhar com imagens em TypeScript, suas capacidades e exemplos de uso.

Bibliotecas populares para processamento de imagens

Existem várias bibliotecas populares que se integram perfeitamente com TypeScript. Vamos analisar cada uma delas em detalhes.

Sharp

Sharp é uma biblioteca de alto desempenho para processamento de imagens, baseada no módulo nativo libvips. É ideal para aplicações server-side em Node.js. Sharp suporta vários formatos (JPEG, PNG, WebP, AVIF, TIFF) e permite realizar operações com consumo mínimo de memória.

Exemplo de uso com 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('Imagem redimensionada com sucesso');  } catch (error) {    console.error('Erro ao processar:', error);  }}

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

Principais recursos do Sharp:

• Redimensionamento e corte
• Conversão de formatos
• Aplicação de marcas d'água
• Rotação e espelhamento
• Controle de qualidade de compressão

Jimp

Jimp (JavaScript Image Manipulation Program) é uma biblioteca puramente JavaScript que não requer dependências nativas. Funciona tanto no Node.js quanto no navegador. Jimp é mais fácil de instalar, mas mais lento que o Sharp no processamento de arquivos grandes.

Exemplo de trabalho com Jimp em 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) // Mantém as proporções    .greyscale()            // Converte para tons de cinza    .contrast(0.5)          // Aumenta o contraste    .write(outputPath);      console.log('Filtro aplicado');}

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

Recursos do Jimp:

• Operações básicas: resize, crop, rotate
• Efeitos de cor: sepia, greyscale, brightness
• Trabalho com transparência e sobreposição de texto
• Suporte a mais de 20 formatos de imagem

Canvas API para aplicações no navegador

Se você está desenvolvendo uma aplicação cliente em TypeScript, pode usar a Canvas API integrada. Não é uma biblioteca, mas uma interface web padrão para desenho e processamento de imagens. TypeScript fornece tipos para todos os métodos do Canvas.

Exemplo de carregamento e processamento de imagem no Canvas:

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas não suportado');  }    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);        // Aplica efeito de desfoque    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // Obtém dados dos pixels    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('Primeiro pixel:', imageData.data.slice(0, 4));  };