CodeZine(コードジン)

特集ページ一覧

「グレースケール、2値画像」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(84)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/08/18 14:00

解説

 グレースケールは、白と黒、そしてその間のグラデーションの灰色で表現された画像です。画像の各画素から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>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5