Procesamiento de imágenes

Utilidades de imagen basadas en canvas. Cada transformación devuelve un canvas fuera de pantalla en lugar de una data URL, así que se pueden encadenar varias sin codificar y descodificar un PNG en cada paso.

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

Carga una imagen a partir de su ruta; se resuelve una vez descodificada.

Parámetros

Devuelve

cutRound

Recorta una imagen con las esquinas redondeadas.

Parámetros

Devuelve

opacity

Aplica una opacidad uniforme a una imagen.

Prefiere ctx.filter (que corre en la GPU); donde no está disponible, recurre a reescribir el canal alfa píxel a píxel. Esa vía alternativa se salta los píxeles cuyo alfa ya vale 0, de modo que las zonas del todo transparentes no pueden acabar con un valor distinto de cero.

Parámetros

Devuelve

getMatrix

Construye una matriz gaussiana de pesos en dos dimensiones, normalizada para que sumen 1.

La normalización es imprescindible: sin ella, convolucionar con la matriz cambia el brillo general de la imagen. sigma vale por defecto radius / 3; con ese valor la gaussiana ya ha decaído casi a cero al llegar al radio, así que el error por truncamiento es despreciable.

Parámetros

Devuelve

Tipos

type ImgSource = HTMLImageElement | HTMLCanvasElement;

Relacionado

• convertImageToBase64: de File a data URL en base64
• isImageSize: validar las dimensiones de una imagen