Webベースの画像加工フィルタ「ImageFilters.js」
ImageFilters.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
今は何でもJavaScriptという風潮があります。クライアントサイドで処理できるのは悪いことではなく、サーバ負荷の分散に役立つでしょう。今回は画像編集を行うImageFilters.jsを紹介します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.22.07.1379900558.png)
元の写真です。左側のメニューで適用するフィルタを選択します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.23.24.1379900568.png)
二値化。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.23.39.1379900579.png)
ぼかし。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.23.49.1379900593.png)
白黒。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.23.52.1379900605.png)
エンボス。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.23.56.1379900616.png)
エッジ。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.01.1379900625.png)
反転。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.08.1379900640.png)
色調反転。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.12.1379900646.png)
モザイク。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.17.1379900658.png)
油絵。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.24.1379900669.png)
リスケール。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.31.1379900679.png)
露出変更。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.24.35.1379900687.png)
渦巻き。
ImageFilters.jsでは多数のAPIが用意されており、指定した画像に対してエフェクトができるようになっています。画像はCanvasを使って出力されます。出力後、パラメータを変更してさらに加工も可能です。
MOONGIFTはこう見る
ImageFilters.jsは細かな画像編集という訳ではなく、Instagram風にボタン一つでフィルタを適用してくれるタイプのソフトウェアです。フィルタの適用後、パラメータで細かく設定はできますが殆どの場合はこのままで十分と思われます。
その結果はCanvasから画像データを取り出すことで加工後の写真を保存するというのはさほど難しいことではありません。クライアントサイドでの加工であれば、パラメータを変えてリアルタイムにフィルタを変更するのも容易でしょう。画像加工についてはサーバサイドよりもクライアントサイドの方が良さそうです。