画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】

概要

JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。 やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。 変換すると以下のような画像になります。 環境はJavaScript + Canvas

実行イメージ

左が入力画像、右が変換後の画像です。

デモ

こちらから試すことができます。

Q.1 チャンネル入れ替えのデモ

ソース

RGBからBGRに変換する場合のソースコード

const canvas = document.getElementById('canvas');
let image = new Image();
image.src = './path/to/image.png';
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);

let src = ctx.getImageData(0, 0, image.width, image.height);
let dst = ctx.createImageData(image.width, image.height);

for (let i = 0; i < src.data.length; i += 4) {
  dst.data[i] = src.data[i + 2];
  dst.data[i + 1] = src.data[i + 1];
  dst.data[i + 2] = src.data[i];
  dst.data[i + 3] = src.data[i + 3];
}
ctx.putImageData(dst, 0, 0);

簡単に説明するとsrcに入力画像の情報が配列として格納されています。またこの配列にはr,g,b,aの4つごとに値が格納されています。これらの順番を入れ替えて再びcanvasにセットすることでチャンネルを入れ替えることができます。

github

Ans001.ts

2026年版TypeScript実装

現在はTypeScriptとReactへ移行しています。画像処理部分はUIから分離されており、 ImageData.dataを4要素ずつ走査してRとBを交換するアルゴリズムは変わりません。

Uint8ClampedArrayへ代入した値は0〜255へ収められます。アルファ値を元画像からコピーすることで、 透明度を保ったままRGBの並びだけを変更できます。