サーバサイド不要。JavaScriptによる画像エフェクトライブラリ×9選

画像編集というとローカルOSで行ったり、サーバサイドで行うような処理に感じますが、最近ではWebブラウザ側でも十分に行えるようになっています。そのために使われるのがHTML5で標準になったCanvasです。

今回はこのCanvasを使ってクライアントサイドでの画像編集を実現するJavaScriptライブラリを紹介します。

grafijs/grafi

画像のネガポジ反転、ぼかし、シャープ、グレースケール加工などをメソッドを実行するだけで実現します。一部の機能はサポートされていないことがあります。 grafi.solarize(img) のような形でメソッドを実行するだけです。

grafijs/grafi

alexmic/filtrr: Instagram-like image filters in pure JavaScript.

Instagram風の画像加工が行えるライブラリです。多数のエフェクトがあらかじめ作成されており、それに合わせて実行するだけです。画像を手軽に良い感じに加工してくれるライブラリとして重宝するでしょう。

alexmic/filtrr: Instagram-like image filters in pure JavaScript.

jseidelin/pixastic: JavaScript Image Processing Library

一枚の画像に対する処理はもちろん、複数の画像を重ねて表示するような処理もできます。エッジ検出やノイズを載せるような複雑な処理もできます。

jseidelin/pixastic: JavaScript Image Processing Library

rendro/vintageJS: Add a retro/vintage effect to images using the HTML5 canvas element

画像をビンテージ風に加工してくれるエフェクトライブラリです。パラメータで細かく指定もできます。

rendro/vintageJS: Add a retro/vintage effect to images using the HTML5 canvas element

knt5/fur-shader: 🐈 Make everything fluffy (mofumofu)

画像に短い毛を生やしつつ揺らすことでモフモフ感を出すライブラリです。普通の画像とはまた違った楽しさが生まれます。

knt5/fur-shader: 🐈 Make everything fluffy (mofumofu)

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

CSSのフィルタを使って画像加工をします。マウスオーバーと組み合わせたり、徐々に変化させることで写真をより印象づけられます。

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

errozero/glitchatron: Glitch Art Generator

グリッチと呼ばれるデータが壊れた雰囲気の加工ができるライブラリです。使いどころは限られますが、パラメータで何度も加工を繰り返せるのは利点です。

errozero/glitchatron: Glitch Art Generator

karlhorky/gray: Make an image grayscale in all browsers

様々な手段で画像をグレースケール化します。CSSだけ、JavaScript、画像のタグ、スプライト画像への適用などです。JavaScriptでの画像なので、グレースケール化を解除するのも簡単です。

karlhorky/gray: Make an image grayscale in all browsers

arahaya/ImageFilters.js: A Javascript Image filter library for the HTML5 canvas tag.

画像に対して40種類以上の多彩なフィルタリングができます。各パラメータも細かく指定できますので、細かく調整ができます。

arahaya/ImageFilters.js: A Javascript Image filter library for the HTML5 canvas tag.

---

これらのWebブラウザベースの画像加工ではCanvas APIやCSS3のフィルタが使われています。それらをJavaScriptから操作することでクライアントサイドだけで、何度も繰り返し適用できるエフェクトが実現できます。

サーバサイドで行う場合、オリジナルと加工後の画像を保存しておく必要がありますが、Webブラウザベースであればパラメータだけ保存しておけばよくなるでしょう。ぜひ活用してください。