Trabalho com imagens: resize, crop em TypeScript

Trabalho com imagens em TypeScript: redimensionamento (resize) e corte (crop)

No desenvolvimento web moderno, o processamento de imagens no lado do cliente é uma tarefa comum. O TypeScript, graças à tipagem forte e integração com APIs modernas do navegador, permite realizar operações de resize (redimensionamento) e crop (corte) de forma segura e eficiente. Neste artigo, abordaremos duas abordagens: o uso da Canvas API nativa e o trabalho com as bibliotecas de servidor sharp e jimp para Node.js.

1. Canvas API: processamento no cliente sem dependências

O HTMLCanvasElement do navegador é a maneira mais simples de manipular imagens. Ele não requer instalação de pacotes adicionais e funciona em qualquer navegador moderno.

1.1. Redimensionamento (resize) via Canvas

A ideia principal é desenhar a imagem original no canvas com novas dimensões e, em seguida, exportar o 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;    }    // Desenha a imagem com as novas dimensões    ctx.drawImage(source, 0, 0, targetWidth, targetHeight);    // Exporta para Blob (formato padrão - PNG)    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Failed to create blob'));    }, 'image/jpeg', 0.9); // é possível especificar formato e qualidade  });}

Importante: Ao aumentar a imagem (upscale), a qualidade pode piorar — o canvas usa interpolação bilinear. Para pré-visualização é aceitável, para impressão não.

1.2. Corte (crop) com coordenadas

O corte requer especificar uma área retangular da imagem 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;    }    // Recorta o fragmento da imagem 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');  });}

Dica: Sempre verifique se as coordenadas x, y, width, height não ultrapassam os limites da imagem original, caso contrário o canvas retornará áreas vazias.

2. Processamento no servidor: sharp e jimp

Se você trabalha no ambiente Node.js e TypeScript, as bibliotecas sharp (C++ nativo, alta performance) e jimp (JS puro, multiplataforma) são soluções padrão.

2.1. Instalação e importação

// Instalação// npm install sharp// npm install jimp

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

2.2. Redimensionamento (resize) com sharp

async function resizeWithSharp(  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> {  await sharp(inputPath)    .resize(width, height, {      fit: 'cover',      // 'cover' - corta o excesso, 'contain' - ajusta      position: 'center' // ponto de referência para o corte    })    .toFile(outputPath);}

O parâmetro fit define a estratégia de ajuste:

• cover —