解説
グレースケールは、白と黒、そしてその間のグラデーションの灰色で表現された画像です。画像の各画素からRGBを取り出して、そのRGBを元にして輝度を計算して、元の画素のRGBに、同じ輝度の値を設定することで、グレースケール化できます。
2値画像は、白と黒の2値で表現された画像です。輝度を元にして、ある値以上は白、未満は黒のように判別して、色と黒の2色で構成された画像にします。こういった処理のことを2値化と言います。
プログラムでは、このように、画素の値を元に、違うRGBを求めて、違う画像を作ることが多いです。グレースケール化も、2値化も、単一の画素だけを参照して計算しますが、画像処理によっては、複数の画素を元にして計算します。
グレースケール化と、2値化は、画像処理の入り口のような処理なので、覚えておくとよいと思います。
サンプル
グレースケール化するコードを、JavaScriptで簡単に書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「グレースケール」のサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var cnvs = $("canvas").get(0);
var ctx = cnvs.getContext("2d");
ctx.drawImage($("img").get(0), 0, 0);
var img = ctx.getImageData(0, 0, cnvs.width, cnvs.height);
var w = img.width, h = img.height;
var imgDt = img.data;
// 色を設定
for (var y = 0; y < h; y ++) {
for (var x = 0; x < w; x ++) {
// 基本位置
var pos = (y * w + x) * 4;
// 順に赤色、緑色、青色を取得
var r = imgDt[pos + 0];
var g = imgDt[pos + 1];
var b = imgDt[pos + 2];
// 輝度を計算
var gray = 0.299 * r + 0.587 * g + 0.114 * b;
// 色を設定
imgDt[pos + 0] = gray;
imgDt[pos + 1] = gray;
imgDt[pos + 2] = gray;
}
}
ctx.putImageData(img, 0, 0);
});
</script>
</head>
<body>
<canvas width=80 height=60></canvas>
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7
AARRHVja3kAAQAEAAAACgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHy
YyLiYmJiYuPjU1NTU1PkRBQUFBQUFERERERERERERERERERERERERERERERERERERERAE
VGRkgHCAmGBgmNiYgJjZENisrNkREREI1QkRERERERERERERERERERERERERERERERERE
RERERERERERERERE/8AAEQgAPABQAwEiAAIRAQMRAf/EAIUAAAIDAQEAAAAAAAAAAAAAA
AMEAQIFAAYBAAIDAQEAAAAAAAAAAAAAAAMEAAECBQYQAAIBAwMCBQMEAQUAAAAAAAECEQ
ASAyExBEETUWFxIgWBoTLwkbHB0UJScjMVEQACAgIBAwQBBQAAAAAAAAABAgAREgNBITE
iUWETBPBxgZGhMv/aAAwDAQACEQMRAD8AXtDSQRpvVbZ0uFSghWnSSBRcgt1X8V9v1OtF
lKtyOyXykExU8rA2JrhpjJgHc1RspzlcbMJBGo39Kac92EQkx+Rn7VLH7fnMNgpETTkhA
pA0B3PStHJjGdC+TIDoQsRvUYcmPGxYg7Qwt0J/qluTgOK3PjQgibrdft/dIbSfkrtyDM
lav0lM/GOP3bSuoGsGh8fICYLbD2jb9GtHiDLyMfcyrYCBH+YpDk8cNlKpcGkhQRox8j9
6MmZFbB+hg2UcSWyC3uHQDagN3HiDBnYU7/5iFFOcsjD+aT5WNsKFDv59fOtY1MYkSGHs
u3M00/MK4gFAk6EeFLLaQoY6DelxnfK/bx/hOpolzoadahQzGy3EE6Fxcmjj9qf+OzM6F
chhlIUDqaFiwQSXM0LKgRr1JMDpUHjcMdAAyUYnkR1wuLlIgYkvuPOtV5bFKtBAIuI0n0
rx3Kzu2UPcZ0tadq1hz83FBfMe6bYKkQPUEeNL7NebhiegiRaiRNnBkfGQpKnJYGIB6bd
daq/Jx5FsZpyCYba3xisfD8jn5EcgqFj2CBpBqzsoN0a/Y0QtXaE1J8gN8cx3B8hAsyFY
EEk7a+FI/LZWhQrShJj0oKqXkGIpLlE3x+1RXvxk268VuO8mHWV6UbGVIULsNaGNMbHck
wKHxBoC35GftRguTY+swn2CrFit30hUyM6MboA2865sJUAA79PCuZSoZCdNSDE112gu1E
TTI1IPEi5Tb3Ju6iy/EZORlGNGEeJr0eL4bEmJUyHvEAL4foevSr/FMDjVMa6D85o2LNc
+TjlGx2a3HZvQ1xPsbWzZEGKrIqigWnPjZsfbKe3Ypp/P+KwuViOCQmx0htxWjx/kO85w
tpbqCv8ABpl0x391gTeYEdKCrfGSGE2rN0bWenM81YoMxB2oGcGTpM/6vKtD5bjtjJdTu
2oPpWP3Sht3FPa/IZS920EYqPeazLGIeZNDxxjlzsdIpjLFqeEUEWyJ2mnUuxj/AK4iUu
Hd1JXqI161GDGkfTf+qJ7YMTHWKXSy5exMT7vCjgnhf7HtLs8iaXx2crkbEdn0GtaZR5B
VdRduesafSsJbb18bhv616QzL7xH6ivO/Zr5SV78iM6rx69uInjUcVE7sJI9w/wBzVGDl
BhaqyAdOhFRzrexju2u08ay+R/0ZLJu9t3/Hy/uhgJRzPlf8S7YHoLWT80yQyky7RA6/W
vPKutMCO7rM13tu08a6ekAL0NwLXc//2Q==">
</body>
</html>
出力結果
