Trabalhando com imagens em TypeScript: bibliotecas, ferramentas e exemplos de código

Trabalhando com imagens em TypeScript: visão completa de ferramentas e bibliotecas

TypeScript é uma linguagem poderosa para desenvolvimento server-side e client-side, frequentemente usada para processamento de imagens. Neste artigo, veremos as principais bibliotecas e ferramentas para trabalhar com imagens em TypeScript, incluindo instalação, configuração e exemplos práticos de código.

O processamento de imagens pode ser necessário em diversos projetos: desde aplicações web até serviços backend. TypeScript adiciona tipagem estrita, o que simplifica o desenvolvimento de algoritmos complexos e reduz a quantidade de erros.

Bibliotecas populares para trabalhar com imagens

• Sharp — biblioteca de alto desempenho para Node.js, escrita em C++. Ideal para processamento server-side: redimensionamento, compressão, conversão de formatos.
• Jimp — biblioteca puramente JavaScript, sem dependências nativas. Adequada para operações simples e soluções multiplataforma.
• Canvas — implementação do HTML5 Canvas para Node.js. Permite desenhar, sobrepor texto, criar composições complexas.
• Pica — biblioteca para redimensionamento de imagens de alta qualidade no navegador e Node.js.

Instalação e configuração do Sharp em TypeScript

Sharp é uma das bibliotecas mais rápidas para processamento de imagens. A instalação é feita via npm:

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

Após a instalação, pode-se importar a biblioteca em um arquivo TypeScript:

import sharp from 'sharp';

const resizeImage = async (  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> => {  try {    await sharp(inputPath)      .resize(width, height)      .toFile(outputPath);    console.log('Imagem redimensionada com sucesso');  } catch (error) {    console.error('Erro ao redimensionar:', error);  }};

Trabalhando com Jimp: manipulações simples

Jimp não requer dependências nativas e é excelente para operações simples. Instalação:

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

Exemplo de alteração de brilho e contraste com Jimp:

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {  const image = await Jimp.read(inputPath);    image    .brightness(0.2)    // Aumentar brilho em 20%    .contrast(0.1)      // Aumentar contraste em 10%    .write(outputPath);    console.log('Imagem processada');};

Canvas: criando imagens do zero

A biblioteca Canvas permite criar imagens programaticamente, desenhar formas, sobrepor texto. Instalação:

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

Exemplo de criação de uma imagem simples com texto:

import { createCanvas, loadImage } from 'canvas';import * as fs from 'fs';

const createTextImage = async (  text: string,  outputPath: string): Promise<void> => {  const width = 800;  const height = 200;  const canvas = createCanvas(width, height);  const ctx = canvas.getContext('2d');

  // Preenchimento do fundo  ctx.fillStyle = '#4a90d9';  ctx.fillRect(0, 0, width, height);

  // Configuração do texto  ctx.font = 'bold 48px Arial';  ctx.fillStyle = '#ffffff';  ctx.textAlign = 'center';  ctx.textBaseline = 'middle';

  // Desenha o texto  ctx.fillText(text, width / 2, height / 2);

  // Salva no arquivo  const buffer = canvas.toBuffer('image/png');  fs.writeFileSync(outputPath, buffer);  console.log('Imagem criada');};

Compressão de imagens mantendo a qualidade

A otimização de imagens é uma tarefa crítica para projetos web. Sharp permite ajustar finamente os parâmetros de compressão: