HTML5/Canvasによる妙技。クライアントサイドで画像にイフェクト「CamanJS」 // MOONGIFT Archived

CamanJSはCanvasタグを使いクライアントサイドで画像にイフェクトを施すライブラリ。

CamanJSはHTML5/JavaScript製のオープンソース・ソフトウェア。オンラインで画像を扱うケースは多々ある。ユーザ向けのWebサイトで画像をアップロードしてもらうといったこともあるだろう。画像はテキスト以上のインパクトがあるので使いどころを考えればとても便利だ。

動的にイフェクト

アップロードされた画像をそのまま使っても良いが、多少加工したいと思うときもあるだろう。そうなると突然面倒になる。サーバサイドで画像を加工を行うとなるとImageMagick等をインストールしなければならない。だが簡単な加工ならばCamanJSを使う手もある。

CamanJSはクライアントサイドで画像加工を行うJavaScriptライブラリだ。画像の描画にはCanvasタグを使っている。出来る加工は限られるが、ガンマ値の調整、コントラスト、ノイズ、セピア、色調、色彩、明るさ等が変更できる。変更は画像全体に対して行われるようだ。

イフェクトのプリセット

そして幾つか処理をプリセットとして予め定義しておく事ができる。プラグインによって独自のイフェクトを施す機能もある。jQuery/YUI/Scriptaculous/MooToolsとも組み合わせて使えるので、様々な場面で活用できそうだ。

MOONGIFTはこう見る

クライアントサイドで画像加工を行うのであれば、サーバサイドの準備は無用ですぐに使う事が出来る。HTML5なので対応ブラウザは限定されるが、画像を多数掲載するサイトで簡易イフェクトとして使ってみるのも面白そうだ。

HTML5でできる事のサンプルとしてみても面白い。JavaScriptだけで様々な処理ができるようになっている。今度は何でもサーバサイドではなく、クライアントサイドも活用する視点を持たなければならないだろう。