2014/07/01

【JavaScript】スタイルシートのfilterプロパティを変更する方法

【JavaScript】スタイルシートのfilterプロパティを変更する方法

JavaScriptを使用して,画像に様々なフィルタ効果を与える方法を紹介します.

※対応ブラウザはGoogle Chrome,Opera,Safariとなっています.

目次

サンプル&ソースコード

動作サンプルと指定するためのソースコードを紹介します.

グレー

filterプロパティにgrayscaleを指定し,モノトーン効果を与えます.

指定する値が大きくなるほど効果を強くすることが出来ます.

0~100

    document.getElementById("gray-change").addEventListener("click", function() {
	var img = document.getElementById("gray-image");
	var val = document.getElementById("gray-filterValue").value;
	img.style.webkitFilter = "grayscale(" + val + ")";
    }, false);

セピア

filterプロパティにsepiaを指定し,セピア効果を与えます.

指定する値が大きくなるほど効果を強くすることが出来ます.

0~100

    document.getElementById("sepia-change").addEventListener("click", function() {
	var img = document.getElementById("sepia-image");
	var val = document.getElementById("sepia-filterValue").value;
	img.style.webkitFilter = "sepia(" + val + ")";
    }, false);

トーン

filterプロパティにhue-rotateを指定し,トーンを変更します.

指定する値が大きくなるほど効果を強くすることが出来ます.

deg(0~360)

    document.getElementById("hue-change").addEventListener("click", function() {
	var img = document.getElementById("hue-image");
	var val = document.getElementById("hue-filterValue").value;
	img.style.webkitFilter = "hue-rotate(" + val + "deg)";
    }, false);

色反転

filterプロパティにinvertを指定し,要素の色を反転させます.

指定する値が大きくなるほど効果を強くすることが出来ます.

0~100

    document.getElementById("invert-change").addEventListener("click", function() {
	var img = document.getElementById("invert-image");
	var val = document.getElementById("invert-filterValue").value;
	img.style.webkitFilter = "invert(" + val + ")";
    }, false);

輝度

filterプロパティにbrightnessを指定し,輝度を変更できます.

指定する値が大きくなるほど効果を強くすることが出来ます.

-100~100

    document.getElementById("brightness-change").addEventListener("click", function() {
	var img = document.getElementById("brightness-image");
	var val = document.getElementById("brightness-filterValue").value;
	img.style.webkitFilter = "brightness(" + val + ")";
    }, false);

コントラスト

filterプロパティにcontrastを指定し,コントラストを変更できます.

指定する値が大きくなるほどコントラストを強くすることが出来ます.

0~

    document.getElementById("contrast-change").addEventListener("click", function() {
	var img = document.getElementById("contrast-image");
	var val = document.getElementById("contrast-filterValue").value;
	img.style.webkitFilter = "contrast(" + val + ")";
    }, false);

彩度

filterプロパティにsaturateを指定し,彩度を調整できます.

指定する値が大きくなるほど彩度を強くすることが出来ます.

0~

    document.getElementById("saturate-change").addEventListener("click", function() {
	var img = document.getElementById("saturate-image");
	var val = document.getElementById("saturate-filterValue").value;
	img.style.webkitFilter = "saturate(" + val + ")";
    }, false);

ぼかし

filterプロパティにblurを指定し,要素をぼかすことが出来ます.

ぼかし幅をpx単位で指定します.

px

    document.getElementById("blur-change").addEventListener("click", function() {
	var img = document.getElementById("blur-image");
	var val = document.getElementById("blur-filterValue").value;
	img.style.webkitFilter = "blur(" + val + "px)";
    }, false);

まとめ

様々な効果を与えられることが出来るので,使用できるブラウザが増えれば画像を複数枚用意する必要がなくなったり,JavaScriptによる演出の幅が広がると思います.

モダンブラウザだけでの開発であればぜひ使ってみてください.