画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。 そこで使ってみたいのがglfx.jsです。JavaScriptを使ってWebブラウザ上で画像を加工するソフトウェアです。

glfx.jsの使い方

元画像です。

マウスがあるところに渦巻きが描かれます。

ノイズ。

周囲を暗くします。

ぼかし。ぼかしの位置も変更できます。

マウスの当たっている場所を少し拡大します。

ドット変換。

昔の写真のように粗いドット。

glfx.jsを使うと元の画像は変えないままにフィルタリングをかけられます。画像全体だけでなく、マウスがある場所だけに施すことも可能です。フィルタリングの種類も多様で、様々な加工が施せるでしょう。フィルタリングした画像はCanvasに描かれているので、画像として保存も可能です。WebGLを使っているので高速に処理されます。

glfx.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

glfx.js evanw/glfx.js: An image effects library for JavaScript using WebGL