Processamento de imagens

Auxiliares de imagem apoiados em canvas. Cada transformação devolve um canvas fora da tela em vez de uma data URL, então dá para encadear várias sem codificar e decodificar um PNG a cada passo.

Uso

import { getImage, cutRound, opacity } from 'ranuts/utils';

const img = await getImage('/avatar.png');
const rounded = cutRound(img, 24);
const faded = opacity(rounded, 0.5);
document.body.appendChild(faded as HTMLCanvasElement);

API

getImage

Carrega uma imagem pelo caminho; resolve assim que ela é decodificada.

Parâmetros

Retorna

cutRound

Recorta uma imagem com cantos arredondados.

Parâmetros

Retorna

opacity

Aplica uma opacidade uniforme a uma imagem.

Prefere o ctx.filter (que roda na GPU); onde ele não existe, recorre a reescrever o canal alfa pixel a pixel. Esse caminho alternativo pula os pixels cujo alfa já é 0, de modo que as regiões totalmente transparentes não acabam com um valor diferente de zero.

Parâmetros

Retorna

getMatrix

Monta uma matriz gaussiana de pesos em duas dimensões, normalizada para que somem 1.

A normalização é indispensável: sem ela, convolver com a matriz muda o brilho geral da imagem. sigma vale por padrão radius / 3; com esse valor a gaussiana já decaiu para quase zero ao chegar ao raio, então o erro de truncamento é desprezível.

Parâmetros

Retorna

Tipos

type ImgSource = HTMLImageElement | HTMLCanvasElement;

Relacionado

• convertImageToBase64: de File para data URL em base64
• isImageSize: validar as dimensões de uma imagem