[JS]HTML5 Canvasを使って、画像にさまざまなエフェクトを与えるスクリプト -CamanJS

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+

via: Free JavaScript Image Manipulation Library: CamanJS

sponsors

top of page

©2018 coliss