画像を2値化する JavaScript + canvas 【画像処理】

概要

JavaScriptで画像を2値化するサンプルコードの紹介。

デモ

Q.3 二値化のデモ

実行すると以下のような画像が生成されます。

サンプルソース

グレースケールに変換された画像の各画素の値が閾値未満であれば0、閾値以上であれば255に変換します。 ここでは閾値を128としています。

const canvas = document.getElementById('canvas');
let image = new Image();
image.src = './path/to/image.png';
const THRESHOLD = 128;
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) {
  let y = 0.2126 * src.data[i] + 0.7152 * src.data[i + 1]
    + 0.0722 * src.data[i + 2];
  y = parseInt(y, 10);
  if (y > THRESHOLD) {
    y = 255;
  } else {
    y = 0;
  }
  dst.data[i] = y;
  dst.data[i + 1] = y;
  dst.data[i + 2] = y;
  dst.data[i + 3] = src.data[i + 3];
}
ctx.putImageData(dst, 0, 0);

グレースケールについてはこちらを参考にしてください。

画像をグレースケールに変換する

2026年版TypeScript実装

現在のソースはAns003.ts です。三項演算子でgray > 128 ? 255 : 0を選び、R、G、Bへ同じ値を設定しています。

固定閾値は処理が単純ですが、画像全体が暗い場合や明るい場合に前景と背景を適切に分離できません。 画像ごとに閾値を求める方法は大津の二値化で扱います。