CSS3 filter滤镜属性小项目——图片高斯模糊、高亮、对比度、灰度、色调、色彩旋转、透明、饱和、褐色调整

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy学到了CSS3的filter属性，心血来潮做了个filter滤镜组工具，可以多重给自己的图片添加滤镜。拿走不谢，别忘了更改对应的...

苏一恒

1323人浏览 · 2018-11-03 09:08:08

苏一恒 · 2018-11-03 09:08:08 发布

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

学到了CSS3的filter属性，心血来潮做了个filter滤镜组工具，可以多重给自己的图片添加滤镜。

拿走不谢，别忘了更改对应的路径名。

代码如下

html部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Junking图片滤镜工具</title>
		<link rel="stylesheet" type="text/css" href="css/imgChange.css" />
	</head>

	<body>
		<div>
			<figure>
				<img src="img/Junking.jpg" alt="原始图片" width="500px" height="500px" />
				<figcaption>原始图片</figcaption>
			</figure>
			<figure id="f">
				<img src="img/Junking.jpg" alt="修改图片" width="500px" height="500px" />
				<figcaption>修改图片</figcaption>
			</figure>
		</div>
		<div id="changeArea">
			<div>
				<span>高斯模糊</span><input type="range" id="blur" step="1" max="30" min="0" value="0" onmousemove="Change(this)" />
			</div>
			<div>
				<span>高亮滤镜</span><input type="range" id="brightness" step="0.01" max="2" min="0" value="1" onmousemove="Change(this)" />
			</div>
			<div>
				<span>对比滤镜</span><input type="range" id="contrast" step="0.01" max="2" min="0" value="1" onmousemove="Change(this)" />
			</div>
			<div>
				<span>灰度滤镜</span><input type="range" id="grayscale" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
			</div>
			<div>
				<span>色调旋转</span><input type="range" id="hue-rotate" step="1" max="360" min="0" value="0" onmousemove="Change(this)" />
			</div>
			<div>
				<span>色彩翻转</span><input type="range" id="invert" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
			</div>
			<div>
				<span>透明滤镜</span><input type="range" id="opacity" step="0.01" max="1" min="0" value="1" onmousemove="Change(this)" />
			</div>
			<div>
				<span>饱和滤镜</span><input type="range" id="saturate" step="0.01" max="1" min="0" value="1" onmousemove="Change(this)" />
			</div>
			<div>
				<span>褐色滤镜</span><input type="range" id="sepia" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
			</div>
		</div>

	</body>
	<script src="js/imgChange.js" type="text/javascript" charset="utf-8"></script>

</html>

CSS部分

body figure {
	display: inline-block;
}

figure>figcaption {
	text-align: center;
}

#changeArea {
	align-content: center;
}

JavaScript部分


		var objStyle = document.getElementById("f").style; //获取图片figure元素的style
		var blur = 0;
		var brightness = 1;
		var contrast = 1;
		var grayscale=0;
		var hueRotate=0;
		var invert=0;
		var opacity=1;
		var saturate=1;
		var sepia=0;		
		function Change(v) {
			if(v.id=="blur"){
				blur=v.value;
				on();
			}else if(v.id=="brightness"){
				brightness=v.value;
				on();
			}else if(v.id=="contrast"){
				contrast=v.value;
				on();
			}else if(v.id=="grayscale"){
				grayscale=v.value;
				on();
			}else if(v.id=="hue-rotate"){
				hueRotate=v.value;
				on();
			}else if(v.id=="invert"){
				invert=v.value;
				on();
			}else if(v.id=="opacity"){
				opacity=v.value;
				on();
			}else if(v.id=="saturate"){
				saturate=v.value;
				on();
			}else if(v.id=="sepia"){
				sepia=v.value;
				on();
			}
		}

		function on() {
		var str = "blur(" + blur + "px) brightness(" + brightness + ") contrast("+contrast+") grayscale("+grayscale+") hue-rotate("+hueRotate+"deg) invert("+invert+") opacity("+opacity+") saturate("+saturate+") sepia("+sepia+")";
			objStyle.filter =str;
			objStyle.webkitFilter = str;
		}

效果图如下：