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

2019-04-07

概要

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

実行イメージ

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

デモ

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

https://s-yoshiki.github.io/Gasyori100knockJS/#/questions/ans1

ソース

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)