HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。 そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。

CanvasEffect.jsの使い方

パラメータが様々にあるので、それを動かせば元画像にエフェクトがかかります。

セピアにしたり…。

グレースケールにも。

ノイズを増やしたり。

こんなカラフルな感じにも。

エフェクトはダイナミックに行えます。

画像をエフェクトするライブラリは多数ありますが、多くはアクションを指定する形となっています。CanvasEffect.jsは数値で割合を指定できるので、より細かな制御が可能です。明るさやコントラスト、ガンマ、輝度、ノイズなどエフェクトも多数揃っています。HTML5の良さとして、元の画像を上書きせずに何度も繰り返して試せるのが利点です。

CanvasEffect.jsはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

CanvasEffect.js image adjustments licson0729/CanvasEffects: It is a little javascript library for you to add some effects on photos using HTML5 canvas