サーバサイドで画像加工を行う場合、ImageMagickを使うのが基本になるでしょう。しかし先日ImageMagickの中にセキュリティホールがあったり、サーバの負荷を考えると使うのを控えてしまう人もいるのではないでしょうか。 そこで使ってみたいのがgrafi.jsです。JavaScriptで画像加工を行えるライブラリです。

grafi.jsの使い方

元の画像です。

ネガポジ逆転。

暗くしたり。

グレースケールも。

ぼかし。

シャープ加工。

grafi.jsを使えばクライアントサイドで画像加工ができます。元の画像はそのままなので、何度も加工できるのが魅力でもあります。なお、一部の加工(ぼかしなど)は使えないブラウザもあったので注意してください。

grafi.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

grafi.js grafijs/grafi