[JS]HTML5 Canvasを使って、画像にさまざまなエフェクトを与えるスクリプト -CamanJS
Post on:2011年2月28日
sponsors
jQueryなど他のスクリプトに依存せず、画像にさまざまなエフェクトを与えるスクリプトを紹介します。
CamanJS - Image Manipulation in Javascript
[ad#ad-2]
デモページでは、画像に与えるさまざまなエフェクトをリアルタイムに楽しむことができます。
これらのエフェクトの種類は数多く用意されていますが、独自のプラグインを作成して使用することも可能です。
詳しくは、ドキュメントを参照ください。
[ad#ad-2]
CamanJSの実装
「caman.full.min.js」を外部ファイルとして記述し、下記のようにスクリプトを記述します。
<script type="text/javascript">
Caman("images/example-image.jpg", "#example-canvas", function () {
this
.saturation(20)
.gamma(1.4)
.vintage()
.contrast(5)
.exposure(15)
.vignette(300, 60)
.render();
});
</script>
<canvas id="#example-canvas"></canvas>
CamanJSの対応ブラウザ
対応ブラウザは下記の通りです。
- Google Chrome
- Safari 5+
- Firefox 4+
- Opera 10+
- Internet Explorer 9+
sponsors
