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

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

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

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

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

スポンサーリンク

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

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

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

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

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

Canvasを生成する

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

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

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

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

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

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

上記のコードを実行すると、以下の画像のように全体が赤っぽい感じになります。

赤くしただけですが、なんか画像処理っぽいことができてますね!

次回予告

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

次回は実際に簡単な画像処理をする方法について紹介を行います。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です