【Javascript】ブラウザで画像処理その1『ファイルを表示しよう!』の続きです。
本記事では、選択された画像のデータ(画素値など)を読み取って変更する方法について紹介を行います。
スポンサーリンク
画像処理を行うトリガーを作る
前回作成した「ファイルを選択」ボタンから画像読み込み後に、画像処理を行うためのトリガーとなるボタンを追加します。
1 2 3 4 |
<body> <input type="file" class="inputFile"><button class="execBtn">画像処理</button><br /> <img class="showImage"> </body> |
下図のように「ファイルを選択」ボタンの右側に「画像処理」ボタンが表示されます。
表示が正しく行われていたら、ボタンのイベントの追加を行います。
ボタンのイベントの追加は、「ファイルを選択」ボタンの変更イベントと同様にページのロード完了時に行います。
1 2 3 4 5 6 7 8 9 10 |
$(function() { // inputタグの変更イベント $('.inputFile').on("change", function(){ 〜〜〜〜 }); // 画像処理ボタンの押下イベント $('.execBtn').on("click", function() { // ここに画像処理を行う記述をする }); }); |
Canvasを生成する
Javascriptで画像処理を行うためには、読み込んだ画像をCanvasに渡してやる必要があります。
ページ上には表示しなくても良いですが、要素としてCanvasを生成してデータを渡します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 読み込み画像データ 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から生データ(画素値)を取得して変更した後に再度画像に設定し直して表示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// 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()); } |
上記のコードを実行すると、以下の画像のように全体が赤っぽい感じになります。
赤くしただけですが、なんか画像処理っぽいことができてますね!
次回予告
本記事では、選択された画像データの画素値を読み取り、変更して反映する方法について紹介を行いました。
次回は実際に簡単な画像処理をする方法について紹介を行います。