電球色の温もりをCanvasで再現する：
合成操作による高速画像処理

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

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

入力

写真と電球色の濃さを指定します。

処理

Canvasの合成モードで暖色を重ねます。画素ごとのImageData計算を使う経路とは異なります。

出力

入力の長辺は 2500px 以下、出力は 1000×1000px の JPEG（品質指定 0.85）です。

まず確認する点：暖色を加えると白い物の色も変わります。撮影時のホワイトバランスを物理的に復元する処理とは区別します。

仕上がりの例

写真をあたたかな電球色にした例です。

画像を拡大

加工前・加工後

閉じる

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

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

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

記録の入力画像

800×1222px (JPEG)

記録の出力画像

1000×1000px (JPEG)

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

画面の項目	記録の値	現行コードの初期値・範囲
記録の写真ズーム	100%	—
記録の電球色	65	—
記録の明るさ	5	—
記録のコントラスト	10	—

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

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

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

1. コンポジット操作による多層フィルタリング

このツールの核心は、JavaScriptによるピクセル操作（getImageData）を一切行わず、ブラウザが実行するglobalCompositeOperationのみでフィルタリングを完結させている点にあります。

電球色の質感を出すために、「soft-light」モードで全体のコントラストと色味を馴染ませ、さらに「color」モードで特定の色相成分を微調整する、という2段階の合成を行っています。これにより、写真の明暗差を保ったまま、ハイライトからシャドウまで自然に色が乗る仕組みになっています。

暖かさの2層を、既に写真を描いた ctx に適用する例です。warm は 0〜100 です。

function warmTone(ctx, warm) {
  ctx.save();
  ctx.globalCompositeOperation = 'soft-light';
  ctx.globalAlpha = warm / 100;
  ctx.fillStyle = '#ff8c00';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.globalCompositeOperation = 'color';
  ctx.globalAlpha = warm / 100 * 0.4;
  ctx.fillStyle = '#ff9614';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.restore();
}

2. 解像度依存を排除した仮想キャンバスシステム

モバイル端末での快適な操作を実現するため、内部処理では常に一定の解像度（1000x1000など）を持つ「仮想編集領域」を定義しています。

ユーザーが拡大・縮小やドラッグを行っても、処理対象となるキャンバス自体のサイズは変化させず、画像描画時の座標計算（Transform）のみで対応しています。この設計のメリットは、プレビューと保存で同じ 1000×1000px の描画面を使える点にあります。処理時間は元画像や端末にも依存します。

出力の仕様と確認する点

入力の長辺は 2500px 以下、出力は 1000×1000px の JPEG（品質指定 0.85）です。写真のドラッグと 50〜300% のズームで、正方形に切り出す範囲を選びます。

描画順は写真、コントラスト、明るさ、暖色です。明るさが正なら白を lighter、負なら黒を multiply で重ねます。暖かさ 0 でも明るさやコントラストの設定が残れば元の色とは変わります。

ケルビン単位の色温度変換やホワイトバランスの自動判定ではありません。白い商品を撮影時の正確な色に戻す用途では、暖色表現と色補正を区別してください。