Processamento de imagens com Canvas 2D: Princípios e prática de operações de pixels no navegador

Canvas no processamento de imagens

O navegador oferece três caminhos de processamento de imagens:

Abordagem	Desempenho	Flexibilidade	Melhor para
Filtro CSS	Alto (GPU)	Baixa (filtros predefinidos)	Efeitos visuais simples
Canvas 2D	Médio	Alta (nível de pixel)	Compressão, corte, conversão de formato
WebGL	Mais alto	Alta (requer shaders)	Filtros complexos, processamento em tempo real

As ferramentas de imagem do ToolsKu (comprimir, cortar, conversão de formato, marca d'água) são todas construídas sobre a API Canvas 2D.

Fluxo de processamento básico

// 1. Load image
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();

// 2. Create Canvas and draw
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(img, 0, 0);

// 3. Export to target format
const blob = await new Promise<Blob>((resolve) =>
  canvas.toBlob(resolve, 'image/webp', 0.85) // quality 85%
);

Como funciona a compressão de imagens

A compressão com Canvas é essencialmente recodificação:

Original PNG (2MB, lossless)
     ↓ drawImage to Canvas
     ↓ toBlob('image/jpeg', 0.8)
Compressed JPEG (400KB, lossy 80% quality)

Formato	Compressão	Taxa típica	Transparência
JPEG	DCT com perdas	60-80%	❌
WebP	Com perdas/sem perdas	70-90%	✅
PNG	DEFLATE sem perdas	10-30%	✅
AVIF	Com perdas/sem perdas	80-95%	✅

A ferramenta de compressão de imagens do ToolsKu suporta compressão em lote WebP/JPEG. A qualidade padrão de 85% equilibra o tamanho do arquivo e a qualidade visual.

Operações em nível de pixel

Manipule pixels RGBA diretamente através de ImageData:

const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data; // Uint8ClampedArray, 4 bytes = 1 pixel

for (let i = 0; i < data.length; i += 4) {
  // Grayscale
  const avg = (data[i] + data[i+1] + data[i+2]) / 3;
  data[i] = data[i+1] = data[i+2] = avg;
}

ctx.putImageData(imageData, 0, 0);

Otimização de desempenho com OffscreenCanvas

Operações de Canvas na thread principal bloqueiam a UI. OffscreenCanvas pode ser executado em um Worker:

// worker.ts
const offscreen = new OffscreenCanvas(width, height);
const ctx = offscreen.getContext('2d')!;
ctx.drawImage(imageBitmap, 0, 0);
const blob = await offscreen.convertToBlob({ type: 'image/webp', quality: 0.85 });
postMessage({ blob }, [blob]); // Transferable

Ao processar em lote 50 imagens, OffscreenCanvas + Worker reduz o bloqueio da thread principal de 10s para 0.

Perguntas frequentes

Por que a imagem fica borrada após a compressão?

A compressão com perdas de JPEG/WebP descarta detalhes de alta frequência. Aumente o parâmetro de qualidade (0.9+) ou use o modo sem perdas de PNG/WebP.

Existem limites de tamanho para o Canvas?

A maioria dos navegadores limita uma única borda do Canvas a 16384px, com uma área total de aproximadamente 268MP. Exceder isso requer processamento em mosaicos.

Como lidar com a orientação EXIF?

Fotos de celulares podem incluir EXIF Orientation. Leia o EXIF e rotacione o Canvas antes de desenhar, ou a imagem aparecerá girada. O Conversor de formato de imagem do ToolsKu lida com EXIF automaticamente.

Resumo

Canvas 2D é a abordagem padrão para processamento de imagens no navegador. Compreender o pipeline de codificação drawImage → toBlob, as operações de pixels com ImageData e o descarregamento para Worker com OffscreenCanvas é fundamental para construir ferramentas de imagem de alto desempenho.