Canvas を土台にした画像のヘルパーです。どの変換も data URL ではなく オフスクリーンの canvas を返すので、いくつもつなげても、その都度 PNG に符号化して復号し直す必要がありません。
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);
パスから画像を読み込みます。デコードが終わった時点で解決されます。
| パラメーター |
説明 |
型 |
既定値 |
src |
画像のパス |
string |
必須 |
| 引数 |
説明 |
型 |
promise |
読み込まれた画像の要素 |
Promise<ImgSource> |
画像の角を丸く切り抜きます。
| パラメーター |
説明 |
型 |
既定値 |
img |
もとの画像 |
ImgSource |
必須 |
radius |
角の丸みの半径 |
number |
必須 |
| 引数 |
説明 |
型 |
canvas |
オフスクリーンの canvas |
ImgSource |
画像全体に一様な不透明度をかけます。
まず ctx.filter（GPU で処理されます）を使い、対応していない環境ではアルファチャンネルを画素ごとに書き換える方式に切り替えます。切り替え後の処理は、アルファがすでに 0 の画素を飛ばすので、完全に透明な領域が 0 でない値を拾ってしまうことはありません。
| パラメーター |
説明 |
型 |
既定値 |
img |
もとの画像 |
ImgSource |
必須 |
opacity |
不透明度（0〜1） |
number |
必須 |
| 引数 |
説明 |
型 |
canvas |
オフスクリーンの canvas |
ImgSource |
2 次元のガウス分布の重み行列を作ります。重みの合計が 1 になるよう正規化されます。
正規化は欠かせません。これがないと、この行列で畳み込んだときに画像全体の明るさが変わってしまいます。sigma の既定値は radius / 3 です。この値なら半径のあたりでガウス分布はほぼ 0 まで減衰しているので、打ち切りによる誤差は無視できます。
| パラメーター |
説明 |
型 |
既定値 |
radius |
ぼかしの半径 |
number |
必須 |
sigma |
標準偏差 |
number |
radius / 3 |
| 引数 |
説明 |
型 |
matrix |
(2r+1)² 個の平坦な配列。行優先で、合計は 1 |
number[] |
type ImgSource = HTMLImageElement | HTMLCanvasElement;