写真を加工する際には画像編集ソフトウェアを使います。UGM(ユーザー生成コンテンツ)の場合、アップロードされる画像すべてを加工するのはたいへんです。サーバ側で処理できますが、サーバの負荷は大きくなるでしょう。 そこで使ってみたいのがfilters.cssです。CSSベース、クライアント側でフィルタリング処理が可能です。

filters.cssの使い方

提供されるフィルタリングです。ぼかし処理。

グレースケール。複数段階用意されています。

輝度。

コントラスト。

反転。

彩度。

セピア。

指定部分だけのぼかし。

透明度。

filters.cssを使うことで、画像全体(または一部のフィルタは特定部分だけに対応)のフィルタリングが可能です。CSSであれば何度も繰り返しフィルタリングを実施することもできます。クラスによって複数段階のフィルタリングができるのも魅力的です。

filters.cssはCSS製のオープンソース・ソフトウェア(MIT License)です。

filters.css - CSS only library to apply color filters. bansal/filters.css: CSS only library to apply color filters.