長らく当サイトの Canvasリファレンスが古いままでしたが、この度、最新の W3C のHTML5 Working Draft Published Version (25 August 2009) にあわせて、全面的に更新しました。

以前と比べて、内容に大きな違いはありませんが、これまで曖昧だった部分が明確化されています。また、新たに createImageData() メソッドが追加され、ピクセル操作関連のメソッドや属性の説明が大幅に変更されています。

HTML5 のドラフトでは、このピクセル操作関連のメソッドや属性のサンプルコードが新たに 2 つ掲載されたのですが、そのうち、エッジ検出のサンプルが、とても興味深いです。

HTML5 のドラフトではコードのみが掲載されているだけで、イメージがわきにくいので、当サイトのピクセル操作関連のリファレンスでは、そのエッジ検出のサンプルコードを実際に動かしてみましたので、ご覧ください。

簡単にお見せすると、こんな感じになります。

上記の画像を JavaScript から読み込んで、ピクセル操作を行い、エッジ検出を行った結果を、Canvas 上に描画すると、下図のようになります。

たった数十行で、JavaScript だけでこのような処理が可能となるのは、驚くばかりです。画像の知識があれば、PhotoShop のフィルターのような操作が JavaScript だけで実現できそうですね。

この Canvas のピクセル操作関連のメソッドは、仕様上はビデオにも対応していますので、ブラウザが対応してくれれば、ビデオと協調した面白いアプリケーションが作れそうですね。Canvas の drawImage() メソッドは仕様上ではビデオにも対応していますので、このメソッドで取り出したイメージデータを、ピクセル操作関連のメソッドで処理することで、ビデオと協調した面白いアプリケーションが作れそうですね。

コメントは受け付けていません。