サイト上で写真を綺麗に見せようと思ったら多少の加工は欠かせません。しかし大量にある写真を一つ一つメンテナンスするのは大変ですし、加工前の写真も保存しておくと容量が2倍必要になってしまいます。 そこで使ってみたいのがJavaScript、つまりクライアントサイドでの写真加工です。今回はPhilterを紹介します。

Philterの使い方

Philterのデモです。こちらはグレースケール加工した写真です。

マウスオーバーすると元の写真を表示します。

色をカスタムするフィルタです。

Philterはdata-philter-*でフィルタを指定し、条件を値として設定できます。デフォルトではコントラストや明るさ、ドロップシャドーと言ったフィルタが用意されています。自分でカスタムされたフィルタを作成することも可能です。

PhilterはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Philter - A JS plugin for CSS filters Specro/Philter: Philter is a jQuery plugin giving you the power to control CSS filters with HTML attributes.