画像グレースケール変換ツール

画像のグレースケール変換は、色の情報を取り除き、黒、白、灰色の濃淡だけで画像を表現する処理です。自然な結果を得るには、赤、緑、青を単純平均するだけでは不十分な場合があります。人間の目は青より緑に敏感なため、R×0.299 + G×0.587 + B×0.114 のような加重式がよく使われ、明るさ、コントラスト、細部が保たれやすくなります。白黒写真、文書スキャン、証明写真準備、印刷確認、レトロ風デザイン、画像解析に役立ちます。ただし、色で意味を伝えるグラフや UI では、情報が失われないか確認が必要です。

画像のグレースケール変換は、各ピクセルを RGB 色空間から知覚される明るさを表す単一の輝度値に変換する処理です。本ツールは ITU-R BT.601 標準（標準画質テレビ向け）で定義された輝度法（加重平均法とも呼ばれる）を使用しています。Gray = R × 0.299 + G × 0.587 + B × 0.114。これらの係数は人間の視覚系の感度を反映しており、網膜の錐体細胞は約 64% 赤感度（L 錐体）、32% 緑感度（M 錐体）、2% 青感度（S 錐体）の比率で分布し、各チャンネルの輝度への寄与を近似しています。緑が 58.7% を占めるのは、人間の視覚がスペクトルの緑〜黄色領域（約 555 nm）に最も鋭感であるためです。 比較として、他の一般的なグレースケール方式は異なる結果を生成します。平均法（Gray = (R + G + B) / 3）は全チャンネルを等しく扱うため、赤が不自然に暗く、青が不自然に明るくなります。HSL/HSV 色空間の脱彩度法は彩度をゼロに設定し、平均法より知覚的に正確ですが輝度重み付けほどではありません。ITU-R BT.709（HDTV 標準）の Luma 方式は若干異なる係数（0.2126、0.7152、0.0722）を使用し、異なる白色点を持つ近代的なディスプレイにより正確です。本ツールで使用する BT.601 係数は最も広く実装されており、幅広い入力画像に対して自然な結果を生成します。 処理パイプラインは完全にブラウザ内で実行されます。アップロードされた画像はブラウザのネイティブ画像デコーダー（JPEG、PNG、WebP、BMP、GIF 対応）により HTMLImageElement にデコードされます。画像は ctx.drawImage() を介して Canvas 要素に描画され、ブラウザの GPU 加速コンポジターが色空間変換とスケーリングを実行します。getImageData() は生の RGBA ピクセルバッファを Uint8ClampedArray として読み戻します。各ピクセルは 4 連続バイト（R、G、B、A）を占めるため、配列の長さは width × height × 4 になります。グレースケール処理ループはストライド 4（i += 4）で反復し、加重合計を計算し、元のアルファチャンネルを保持しながら 3 つの RGB チャンネルすべてに同じグレー値を書き込みます。putImageData() で変更されたバッファをキャンバスに書き戻し、canvas.toBlob('image/png') で結果を可逆 PNG としてエンコードし、URL.createObjectURL() でダウンロードリンク用の blob: URL を生成します。 バッチ処理では、メインスレッドの飽和を避けるため各画像が順次処理されます。各変換の Promise を await してから次の処理を開始し、キャンバスは画像間で再利用されて GPU テクスチャの割り当てラッシュを回避します。元の File オブジェクトはグレースケール Blob と同時に保持され、ダウンロードファイル名は元のファイル名に '_grayscale' を付加して生成されます。

• ITU-R BT.601 輝度係数: R × 0.299 + G × 0.587 + B × 0.114。CIE 1931 標準観測者の明視感度関数から導出され、人間の網膜の錐体細胞分布（L:M:S ≈ 64:32:2）と 555 nm（緑〜黄色）のピーク感度をモデル化しています。
• 方式の比較: 平均法 (R+G+B)/3 は赤が暗く青が明るくなりすぎる。脱彩度法（HSL S=0）は改善されるが知覚的に均一ではない。BT.709 Luma（0.2126R + 0.7152G + 0.0722B）は HDTV ディスプレイにより正確だが、本ツールで使用する BT.601 の重み付けがブラウザと画像ツール間で最も広くサポートされています。
• Canvas ピクセルパイプライン: drawImage() → GPU コンポジターがデコードとスケーリングを実行 → getImageData() で RGBA Uint8ClampedArray を読み取り → ピクセルごとの加重合計ループ（ストライド 4、i += 4） → putImageData() で書き戻し → toBlob('image/png') で可逆 PNG としてエンコード → createObjectURL() でダウンロード。
• アルファチャンネルの保持: アルファバイト（インデックス i+3）は読み取られるが変更されません。透明ピクセルは透明のまま維持され、元のアルファ値は変更なしで通過します。これは透明度を持つ PNG 画像やアンチエイリアスされたエッジで重要です。
• 順次バッチ処理: メインスレッドの飽和を避けるため、各画像が await で 1 つずつ処理されます。キャンバス要素は画像間で再利用され、File オブジェクトは元のファイル名に '_grayscale' を付加したダウンロードファイル名の生成に使用されるため保持されます。
• ガンマの考慮: BT.601 係数はリニアな光の強度ではなくガンマエンコードされた sRGB 値に適用されます。これは標準的なアプローチで表示には視覚的に正しい結果を生成しますが、物理的な光の測定が必要なアプリケーション（科学画像、測光）では、まず sRGB 値をリニア化する必要があります。
• メモリ管理: 各グレースケール Blob は画像が削除されるかページが閉じられるまでオブジェクト URL を介してメモリ上に保持されます。削除時に URL.revokeObjectURL() を呼び出すことでメモリリークを防止し、参照が残らなくなると Blob のメモリは解放されます。