画像をクライアントサイドだけでクールに変身「SeuratJS」 // MOONGIFT Archived

SeuratJSは画像をピクセルアートに変換するRaphaëlプラグインです。

従来Webサイトにおいて画像は表示して終わりでしたが、HTML5/Canvasの登場によってクライアントサイドでも編集できるようになってきました。そこで紹介したいのがSeuratJSです。画像をモザイクなどのピクセルアートに変換します。

元の写真です（右側）。

じゃじゃーん。丸と四角のモザイクになりました。

こちらも元画像。

アニメーションもつけられます。

こんな画像も…

面白い！

SeuratJSの面白さはサーバサイドの仕組みを使っていない点にあるでしょう。複雑なアニメーションを式だけで実現したり、ステップ数の指定もできます。Webサイトのトップなどで使ったりすると効果的かも知れません。

SeuratJSはJavaScript製、MIT LicenseまたはGPLのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

Webサービスにおいて何でもサーバサイドで行う時代は終わっています。クライアントも十分にスペックが高くなっている現在、いかにクライアントサイドで処理を行わせて負荷分散と体感速度向上を狙うかが鍵になります。ネットワークやサーバの処理時間がボトルネックになっている場合は特に有効でしょう。

問題はJavaScriptの互換性にあります。ただしデザインの世界においては多数のWebブラウザにノウハウで対応してきた歴史があります。そのJavaScript版が必要とされているだけとも言えます。恐れずJavaScriptを積極的に使っていきましょう。