【Javascript】ブラウザで画像処理その2『画像データを読み取ろう！』

【Javascript】ブラウザで画像処理その1『ファイルを表示しよう！』の続きです。

本記事では、選択された画像のデータ（画素値など）を読み取って変更する方法について紹介を行います。

【Javascript】ブラウザで画像処理その1『ファイルを表示しよう！』

【Javascript】ブラウザで画像処理その3『簡単な画像処理をしてみよう！』

画像処理を行うトリガーを作る
Canvasを生成する
画素値を変更して更新する
次回予告

画像処理を行うトリガーを作る

前回作成した「ファイルを選択」ボタンから画像読み込み後に、画像処理を行うためのトリガーとなるボタンを追加します。

<body>
    <input type="file" class="inputFile"><button class="execBtn">画像処理</button><br />
    <img class="showImage">
</body>

<body>

</body>

下図のように「ファイルを選択」ボタンの右側に「画像処理」ボタンが表示されます。

表示が正しく行われていたら、ボタンのイベントの追加を行います。

ボタンのイベントの追加は、「ファイルを選択」ボタンの変更イベントと同様にページのロード完了時に行います。

$(function()
{
    // inputタグの変更イベント
    $('.inputFile').on("change", function(){ 〜〜〜〜 });
    // 画像処理ボタンの押下イベント
    $('.execBtn').on("click", function()
    {
        // ここに画像処理を行う記述をする
    });
});

$(function()

{

// inputタグの変更イベント

$('.inputFile').on("change", function(){ 〜〜〜〜 });

// 画像処理ボタンの押下イベント

$('.execBtn').on("click", function()

{

// ここに画像処理を行う記述をする

});

Canvasを生成する

Javascriptで画像処理を行うためには、読み込んだ画像をCanvasに渡してやる必要があります。

ページ上には表示しなくても良いですが、要素としてCanvasを生成してデータを渡します。

// 読み込み画像データ
img = new Image();
// 画像データの読み込み完了後イベント
img.onload = function()
{
    // body内にCanvas追加
    $('body').append("<canvas width='" + img.width.toString() + "' height='" + img.height.toString() + "></canvas>");
    // そのままだと見えてしまうので見えないようにする
    $('canvas').css("display", "none");
    // 追加したCanvas
    cvs = $('canvas')[0];
    // CanvasからContext(実際に画像データを扱っているデータ)を取得
    ctx = cvs.getContext("2d");
    // Contextに読み込み画像データを設定
    ctx.drawImage(img, 0, 0, img.width, img.height);

    // ここで画像データを読み取ったり書き換えて保存したりする
}
// 読み込み画像データに表示用画像データを渡す
img.src = $('.showImage').attr("src");

// 読み込み画像データ

img = new Image();

// 画像データの読み込み完了後イベント

img.onload = function()

{

// body内にCanvas追加

$('body').append("<canvas width='" + img.width.toString() + "' height='" + img.height.toString() + "></canvas>");

// そのままだと見えてしまうので見えないようにする

$('canvas').css("display", "none");

// 追加したCanvas

cvs = $('canvas')[0];

// CanvasからContext(実際に画像データを扱っているデータ)を取得

ctx = cvs.getContext("2d");

// Contextに読み込み画像データを設定

ctx.drawImage(img, 0, 0, img.width, img.height);

// ここで画像データを読み取ったり書き換えて保存したりする

}

// 読み込み画像データに表示用画像データを渡す

img.src = $('.showImage').attr("src");

上記のコードを実行した時点では、ページ上に特に何の変化もありません。

画素値を変更して更新する

さてここからが本題です。

読み込んだ画像のデータがContextに設定されたので、Contextから生データ（画素値）を取得して変更した後に再度画像に設定し直して表示します。

// Contextから生データを取得
data = ctx.getImageData(0, 0, img.width, img.height);
// 生データの取得に成功した場合
if(data)
{
    // 画素値を格納しているデータを取得
    raw = data.data;

    // 縦方向に走査
    for(y = 0; y < img.height; y++)
    {
        // 横方向に走査
        for(x = 0; x < img.width; x++)
        {
            // 該当データのインデックス
            // * idx + 0 -> 赤成分
            // * idx + 1 -> 緑成分
            // * idx + 2 -> 青成分
            // * idx + 3 -> 透明度成分
            idx = x * 4 + y * img.width * 4;
            // 緑成分と青成分を0にして赤成分のみを抽出する
            raw[idx + 1] = raw[idx + 2] = 0;
        }
    }

    // 変更をContextに反映
    ctx.putImageData(data, 0, 0);
    // 変更を表示画像に反映
    $('.showImage').attr("src", cvs.toDataURL());
}