Canvas APIで実現する幻想的な光の表現：虹の光・フレア合成ツールの舞台裏

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

写真を選び、光の位置・強さ・色合いを調整します。

処理

グラデーションで作った色の光をCanvasの合成処理で重ねます。

出力

出力は長辺最大 1500px の JPEG（品質指定 0.95）です。

まず確認する点：光を強くすると写真の暗部や肌の色も変わります。実写のレンズフレアを解析した結果ではなく、重ねる描画の効果として見ます。

仕上がりの例

写真に虹色の光漏れを加えた例です。

画像を拡大

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料では運営者の愛猫の写真を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像

800×1066px (JPEG)

記録の出力画像

800×1066px (JPEG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	🌈 虹の光	—
光の強さ（透明度）	70	初期値 70 ／ 範囲 10〜100
光の広がり（サイズ）	100	初期値 100 ／ 範囲 50〜200

記録では「この画像で完成！」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/image/rainbow-leak/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、File APIとObject URL（選んだ画像の読み込みとBlob URLの解放）が参考になります。

1. 「Screen」ブレンドモードによる明るさを重ねる表現

このツールの肝は、Canvasの globalCompositeOperation に 'screen' を指定している点にあります。スクリーン合成は、背景の色と重ねる色を反転させて乗算し、再び反転させる処理です。

この手法のメリットは、「黒い部分は透過し、明るい部分だけが重なって明るくなる」という、明るい色を加える表現を Canvas の合成で行えることです。実際の光の強度やレンズ内部の反射を計算するものではありません。

光源から画面中心を通る線上のゴースト位置を求める例です。実装では倍率 1.2・1.5・1.8 の3点に円を置きます。

function ghostPosition(source, width, height, multiplier) {
  return { x: source.x + (width / 2 - source.x) * multiplier,
    y: source.y + (height / 2 - source.y) * multiplier };
}

2. プロシージャルな「虹の光」生成アルゴリズム

虹の表現には固定の画像ファイルを使用していません。createLinearGradient を使い、複数のカラーストップを精密に配置することで、コード上で虹を生成しています。

単なる七色ではなく、両端を透明にする（アルファ値を0にする）ことで、写真と重ね合わせる「淡い光」を実現しました。また、Canvasの rotate メソッドを組み合わせることで、光が差し込む角度を表現しています。

3. レンズフレアの「ゴースト」配置ロジック

サンフレア（レンズフレア）モードでは、光源から画面中心を通る直線上に出現する「ゴースト（光の輪）」を再現しています。

光源の座標 (x, y) とキャンバスの中心座標 (cx, cy) の差分ベクトルを計算し、その延長線上に複数の円形グラデーションを配置するアルゴリズムを採用しました。これにより、光源を動かすとゴーストも中心を通る同じ直線上で連動します。実際のレンズ構成に対応する物理モデルではありません。

出力の仕様と確認する点

虹・サンフレア・プリズムの3種類を選び、位置をドラッグできます。虹の角度は −45° 固定で、任意の角度を選ぶ設定ではありません。

強さは 10〜100%、サイズは 50〜200%。基準サイズは写真の長辺です。画面外へ広がる光は出力枠で切れます。白い背景では screen の効果が見えにくいので、暗部のある写真で比較すると作用がわかります。

出力は長辺最大 1500px の JPEG（品質指定 0.95）です。明るく見せる演出であり、白飛び部分の情報復元や撮影時の光源の検出は行いません。