ブログ内検索

by Futomi Hatano

Cavasリファレンスを最新に更新しました。ピクセル関連操作が面白い!

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

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

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

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

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

もとの画像

緑で覆われた公園に小川が流れています。

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

変換後

先ほどの公園のイメージが、エッジのみ強調されたイメージに変換されています。

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

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

この投稿は 2009年9月13日 日曜日 2:40 AM に Canvas カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

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