画像チャンネル抽出 — RGB(A) を個別 PNG として書き出し

チャンネル分解の対象になる画像が持つ情報

RGBチャンネルを個別に抽出したくなる場面は、デジタル画像処理の学習・研究、写真のレタッチや色調整のための分析、医療・科学画像の特定チャンネルの評価、ゲーム / CG 向けテクスチャのアルファマスク確認などです。これらの用途では、対象の画像が研究途中のデータ、未公開の医療画像、開発中のゲームアセットであることが少なくありません。

チャンネル分解はあくまでも「元画像の内部情報を可視化する」操作です。元画像そのものが機密を含んでいれば、分解後の R / G / B チャンネルもその派生物として機密性を持ちます。「グレースケールに変換しただけ」のチャンネルから元の画像を復元できるケースもあるため、チャンネル分解後のファイルの扱いにも注意が必要です。

画像解析サービスへのアップロードが持つリスク

チャンネル分解を行うオンラインサービスは、元画像をサーバーにアップロードします。分解後の R / G / B チャンネル画像を返すために、元画像の全ピクセルデータが転送されます。「解析するだけ」という目的でも、サーバーには元の画像が届いています。

医療画像、衛星写真、特定の被写体を含むオリジナル写真 ——これらをチャンネル分解目的で外部サービスに渡すことは、ピクセルデータを第三者のインフラに転送することを意味します。分解後の画像だけが手元に残り、元の画像は外部に出てしまう、という構造を避けるためにもローカル処理が重要です。

Canvas getImageData / putImageData によるチャンネル分離

このツールは Canvas API の getImageData() で全ピクセルの RGBA 値を取得し、R / G / B / A の各チャンネルを独立に処理します。グレースケールモードでは、対象チャンネルの値を 3 チャンネル分 (RGB) 全てに同じ値として設定した新しい ImageData を作成し、putImageData() でキャンバスに書き込みます。色強調モードでは、対象チャンネルの値をそのチャンネルの色 (R チャンネルなら赤、G なら緑) で表示し、他の 2 チャンネルを 0 にします。

処理はすべてブラウザのページメモリ内で完結します。元画像のピクセルデータは外部ネットワークには送信されません。DevTools の Network タブで確認してもリクエストはゼロです。また、Canvas 経由の再エンコードで EXIF / GPS / ICC プロファイルは除去されます。チャンネル分解と並行してドミナントカラーや代表色のヒストグラムも見たい場合は、抽出した PNG を image-palette に流し込むと各チャンネルの支配色を補完的に把握できます。

チャンネル分解後の使い方と注意点

抽出したチャンネル画像は PNG で保存されます。グレースケールチャンネルは可逆圧縮で保存されるため、チャンネルの輝度情報が完全に保持されます。医療・科学用途では、この精度が重要になります。なお、EXIF や ICC カラープロファイルは Canvas 処理で除去されます。元画像の色空間情報が重要な場合は、元ファイルを別途保管してから本ツールを使ってください。

RGB / RGBA / CMYK / HSL 各色空間とチャンネル分解の意味

getImageData() が返すのは sRGB 色空間の 8-bit RGBA 配列 (Uint8ClampedArray) で、各ピクセルは [R, G, B, A] の 4 バイトで表現されます。アルファチャンネル A は 0 (完全透明) から 255 (完全不透明) で、PNG / WebP / GIF が標準サポート。JPEG はアルファチャンネルを持たないため、JPEG 画像を読み込んだ場合は A = 255 固定になります。RGB の各チャンネルは加法混色 (Additive color) の三原色で、ディスプレイ表示の基本単位です。

印刷業界では CMYK (Cyan / Magenta / Yellow / Key=Black) の減法混色 (Subtractive color) を使い、RGB から CMYK への変換は Adobe Color や CIE 規格の ICC プロファイル変換を経由します。Canvas 2D は CMYK を直接扱えないため、本ツールは RGB チャンネル分解に特化しています。HSL (Hue / Saturation / Lightness) や HSV はピクセル単位の心理物理的表現で、color-converter ツールで HEX から HSL への変換が確認できます。チャンネル分解の目的が「印刷用色分解」の場合は CMYK 対応の Adobe Photoshop / Affinity Photo が適切ですが、「Web 用素材の R / G / B 単独可視化」「テクスチャマスク作成」「医療画像の特定波長帯抽出」のような用途では本ツールの RGB(A) 分解で十分です。

ゲーム CG・医療画像・天文写真でのチャンネル別使い方

ゲーム CG 業界では、PBR (Physically Based Rendering) のマテリアルテクスチャを 1 枚の PNG に複数チャンネルとして埋め込む慣例があります。例えば RGB = Albedo (基本色)、A = Roughness (粗さ) のように 4 チャンネル分の情報を 1 ファイルに詰めて VRAM 帯域を節約します。Unity の HDRP や Unreal Engine の Material Editor では、Metallic / Roughness / Occlusion / Height を RGBA 4 チャンネルに割り当てる ORM (Occlusion-Roughness-Metallic) テクスチャが標準で、本ツールでこの ORM テクスチャをチャンネル分離してそれぞれを個別に確認・修正する用途があります。

医療画像 (DICOM 形式) の世界では、CT スキャンや MRI の濃淡データは通常グレースケール (12-16 bit) ですが、複数の撮影モダリティを RGB チャンネルに割り当てた合成画像を生成するワークフロー (例: T1 強調 = R / T2 強調 = G / FLAIR = B) があり、Canvas 経由で R / G / B チャンネルを個別表示することで、各モダリティの所見を分離して確認できます。天文写真でも狭帯域フィルタ (Hα = R, OIII = G, SII = B) で撮影した SHO 合成画像を、チャンネル別に分解して各ガス雲の分布を見る用途が一般的です。本ツールの「グレースケール抽出」モードは、これらの科学・産業用途で各チャンネルの数値情報を可逆に保持しながら 1 枚ずつ確認するのに適しています。単一チャンネルだけが必要で輝度マップが最終目標なら、Canvas で同じ変換ロジックを共有する image-grayscale の方が手数が少なく済むこともあります。