画像の２値化

画像の画素を白か黒かの２階超に変換する処理を２値化といいます。

閾値

画像の2値化の白か黒かを判別するための閾値をきめなくてはいけません。
閾値の設定はヒストグラムを作成し、その山が二つある場合その山の間の谷に閾値を設定すると、うまく２値化できるようです。
以前つくった輝度のヒストグラムを使ってみます。

だいたい65を境に色を変えてみたらいい感じになったので、
65を閾値にしてみます。

2値化のプログラム

binarization.html

<!DOCTYPE html>
<html>
<head>
<title>画像処理</title>
<script type="text/javascript">
const THRESHOLD = 65;

window.onload = function() {
    var canvas = document.getElementById("c1");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "test.jpg";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var dst = ctx.createImageData(canvas.width, canvas.height);

        for (var i = 0; i < src.data.length; i=i+4) {
            var y = ~~(0.299 * src.data[i] + 0.587 * src.data[i + 1] + 0.114 * src.data[i + 2]);
            var ret = (y > THRESHOLD) ? 255 : 0;
            dst.data[i] = dst.data[i+1] = dst.data[i+2] = ret;
            dst.data[i+3] = src.data[i+3];
        }

        ctx.putImageData(dst, 0, 0);
    };
};
</script>
</head>
<body>
  <canvas id="c1" width="300" height="300">
</body>
</html>

結果は以下のようになります。
ちょっといい感じにできましたかね？

canvasで画像の２値化

画像の２値化

閾値

2値化のプログラム