画像にエフェクトをかけるJavaScriptライブラリ「CamanJS」を使ってみた。ローカルファイルアップロード版も作成。

画像にエフェクトをかけるJavaScriptライブラリ「CamanJS」を使ってみた。

参考にしたページ。

jQueryと合わせてCamanJSライブラリを読み込む。

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/caman.full.min-4.1.1.js"></script>

プリセットの一覧が以下。

■ CamanJS - Preset サンプル一覧

※ 以下の2つのWebページは、パソコンのブラウザChromeでは正常動作するが、スマホのブラウザでは正常動作しない。

1枚の写真にボタンでプリセットを変えるサンプル。

■ CamanJS - Preset サンプル

ローカルの任意の画像をアップロードしてエフェクトをかけるWebページも作成。エフェクトをかけた画像はクリックでファイル保存できる。処理はローカルのJavaScriptですべて行うので、サーバーサイドに画像が送られることはない。

■ CamanJS ローカル画像アップロード

エフェクトをかけた画像はマウス右クリックでローカルに保存できる。ただし、pngファイルでサイズは大きくなる。

【ソースコード】

<div id="file-select">
	画像(JPEG)ファイル：<input id="file" name="file" type="file" />
</div>
<div id="clear">
	<button onclick="Clear();">Clear</button>
</div>
<div>
	<button class="preset" data-preset="clarity">Clarity</button>
	<button class="preset" data-preset="oldBoot">Old Boot</button>
	<button class="preset" data-preset="hazyDays">Hazy Days</button>
	<button class="preset" data-preset="sunrise">Sunrise</button>
	<button class="preset" data-preset="vintage">Vintage</button>
	<button class="preset" data-preset="nostalgia">Nostalgia</button>
	<button class="preset" data-preset="hemingway">Hemingway</button>
	<button class="preset" data-preset="love">Love</button>
	<button class="preset" data-preset="jarques">Jarques</button>
	<button class="preset" data-preset="orangePeel">Orange Peel</button>
	<button class="preset" data-preset="crossProcess">Cross Process</button>
	<button class="preset" data-preset="concentrate">Concentrate</button>
	<button class="preset" data-preset="glowingSun">Glowing Sun</button>
	<button class="preset" data-preset="herMajesty">Her Majesty</button>
	<button class="preset" data-preset="grungy">Grungy</button>
	<button class="preset" data-preset="lomo">Lomo</button>
	<button class="preset" data-preset="sinCity">Sin City</button>
	<button class="preset" data-preset="pinhole">Pinhole</button>
	<button onclick="Reset();">Reset</button>
</div>
<div class="content">
	<figure>
		<img id="original" src=""><figcaption id="original-name"></figcaption>
	</figure>
	<figure>
		<img id="effect" src=""><figcaption id="effect-name"></figcaption>
	</figure>
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
	document.querySelector('#file').addEventListener('change', function(e) {
		if (window.File) {
			var input = document.querySelector('#file').files[0];
			var reader = new FileReader();
			reader.addEventListener('load', function(e) {
				document.getElementById('original').src = reader.result;
				document.getElementById('effect').src = reader.result;
				camanSet();
			}, true);
			document.getElementById('original-name').innerHTML = 'Original';
			document.getElementById('effect-name').innerHTML = 'Original';
			reader.readAsDataURL(input);
			$('#clear').show();
			$('#file-select').hide();
		}
	}, true);
});
function camanSet() {
	var caman = Caman('#effect');
	$('.preset').click(function() {
		var preset = $(this).data('preset');
		caman.revert(true);
		caman[preset]();
		caman.render();
		document.getElementById('effect-name').innerHTML = preset;
	});
	$('#effect').css('max-width', '100%');
}
function Reset() {
	document.getElementById('effect-name').innerHTML = 'Original';
	Caman('#effect', function () {
		this.revert(true);
	});
}
function Clear() {
	location.reload();
}
</script>