Canvas合成モードによる質感表現と
解像度制御の最適化手法

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

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

入力

写真と重ねる色・濃さを選びます。

処理

写真の上へ半透明の色を描き、選んだ合成表現で元の明暗と合わせます。

出力

保存は元写真の縦横比を保つ JPEG（品質指定 0.95）で、長辺は最大 1500px です。

まず確認する点：色を濃くすると写真全体の色が変わります。色名だけで判断せず、肌や白い物がどのように変わるかを見ると調整しやすくなります。

仕上がりの例

写真に透ける色を重ね、色調を変えた例です。

画像を拡大

サンプルにはAIで生成した架空の人物画像を使用しています。

加工前・加工後

閉じる

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

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

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

記録の入力画像

800×805px (JPEG)

記録の出力画像

800×805px (JPEG)

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

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	、オーバーレイ	—
色の濃さ（不透明度）	30	初期値 30 ／ 範囲 0〜100

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

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

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

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

1. GlobalCompositeOperation による高度な色相ブレンド

写真に色を重ねる際、単に opacity（不透明度）を下げた色を被せるだけでは、白飛びしたり色が濁ったりしてしまいがちです。本ツールでは、Canvasの globalCompositeOperation を活用し、overlay（オーバーレイ）や soft-light（ソフトライト）などのブレンドモードを使い分けています。

メリット： オーバーレイ等を用いることで、写真の明るい部分は明るく、暗い部分は暗いまま、元の明暗に応じて色の混ざり方を変えられます。中間調以外が常に変化しないわけではありません。これにより、写真の明暗を参照しながら色調を合わせられます。強い設定では階調や色の区別が失われる場合があります。

写真が描かれた ctx 全体に単色を重ねる例です。mode は source-over・overlay・soft-light など Canvas で対応する合成モードを指定します。

function overlayColor(ctx, color, opacity, mode = 'soft-light') {
  ctx.save();
  ctx.globalCompositeOperation = mode;
  ctx.globalAlpha = Math.max(0, Math.min(100, opacity)) / 100;
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.restore();
}

2. 処理用画像を作るオフスクリーン・リサイズ

最近のスマートフォンの写真は4Kを超えることも珍しくありませんが、そのような巨大なImageDataをCanvasでそのまま処理しようとすると、モバイルブラウザではメモリ不足になる場合があります。本ツールでは、読み込み直後にオフスクリーンCanvasを用いて、処理に最適な上限解像度（MAX_SIZE）へスケーリングしています。

メリット： 読み込み後の処理画像を長辺 1500px 以下に縮小します。さらに、一度リサイズした結果を新たな Image オブジェクトとして再構成することで、縮小した画像をプレビューで使います。読み込み・変換時のメモリ使用量まで一定になるわけではありません。

3. ブラウザ完結型の HEIC 変換パイプライン

本ツールでは HEIC / HEIF を選択すると heic2any ライブラリを動的に読み込み、クライアントサイドで JPEG 変換を行っています。

メリット： 「写真を一枚も外部サーバーに送らない」という当サイトのプライバシーポリシーを貫くために、この変換工程もすべて端末内で完結させています。動的インポートを用いることで、HEIC画像を選択したユーザーだけが変換コードをロードする仕組みにし、初期読み込み速度も確保しています。

出力の仕様と確認する点

色・濃さ・合成モードを選び、画像全体に一様な色を重ねます。被写体だけを選択したり、部分的に塗る機能ではありません。濃さ 0% にすると色レイヤーは表示されません。

保存は元写真の縦横比を保つ JPEG（品質指定 0.95）で、長辺は最大 1500px です。透明背景の PNG を入れた場合も、透明のまま出力する設定はありません。

同じ色と濃さでも、明るい写真と暗い写真では結果が変わります。複数写真をそろえる場合は、まず同じ合成モードで比較し、1枚ずつ濃さを調整すると差を確認しやすくなります。