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