クライアントサイドだけでここまでできる。JavaScriptの画像加工ライブラリ「Pixastic」
PixasticはJavaScriptによる画像編集エンジンです。
画像のちょっとした加工であればわざわざ高価なソフトウェアを使うことなくオンラインで実現できるようになってきました。今回紹介するPixasticもその一つ、多彩なイフェクトを画像に対してダイナミックに適用するライブラリです。
元の写真です。
白黒加工を施しました。
画像を重ねる処理です。
色彩を変更しました。
エッジ検出。
垂直反転。
ネガ加工。
ノイズを乗せています。
セピア加工。
ぼかし。
カラーヒストグラム。
明るさを調整。
丸を使ったモザイク。
シャープ。
切り抜き。
ポスタリゼーション。
モザイク加工。
PixasticはPhotoshopでいうフィルター的な機能を数多く実装しています。その処理の殆どは画像全体にかかるものになっていますが、カスタマイズすれば指定範囲にだけイフェクトを行うこともできるでしょう。またオンラインでクライアントサイドならばサーバの負荷もかからず手軽に実装できるのが便利です。
PixasticはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
これからのWebディレクターやプロデューサーはいかにJavaScriptを使ってクライアントサイドで処理を行わせる設計にできるかが問われるようになるでしょう。全てをサーバサイドで行うと負荷が高く、スケーラビリティにできません。よりクライアントサイドで処理させるようにすれば負荷分散につながります。
基本的には自動的に処理できる部分について適用していくべきでしょう。また、意外とログイン状態の判定を用いる場合もJavaScriptだけで処理できるものが数多くあります。JavaScriptが有効でない場合も想定する必要があるのが難しいところですが今後必ず必要になる技術のはずです。