HTML5设置filter图片滤镜代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5设置filter图片滤镜代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5设置filter图片滤镜代码</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<script src="js/index.js"></script>
<body>

<div>
  <img src="img/许巍.jpg" id="img/img" way="" onClick="css3_filter(this.id)" />
  <table cellspacing="0">
    <tr>
      <td name="button" id="grayscale" onClick="css3_filter(this.id)">灰度</td>
      <td name="button" id="sepia" onClick="css3_filter(this.id)">褐色</td>
      <td name="button" id="saturate" onClick="css3_filter(this.id)">饱和度</td>
      <td name="button" id="hue-rotate" onClick="css3_filter(this.id)">色相旋转</td>
      <td name="button" id="invert" onClick="css3_filter(this.id)">反色</td>
      <td name="button" id="opacity" onClick="css3_filter(this.id)">透明度</td>
      <td name="button" id="brightness" onClick="css3_filter(this.id)">亮度</td>
      <td name="button" id="contrast" onClick="css3_filter(this.id)">对比度</td>
      <td name="button" id="blur" onClick="css3_filter(this.id)">模糊</td>
      <td name="button" id="drop-shadow" onClick="css3_filter(this.id)">阴影</td>
    </tr>
    <tr>
      <td colspan="10" id="value">
       属性值（点击图片取消所有效果）
      </td>
    </tr>
    <tr>
      <td colspan="10" id="value" onClick="stylea()">
      灰度:<output id='1'>0</output>
      褐色:<output id='2'>0</output>
      饱和度:<output id='3'>0</output>
      色相:<output id='4'>0</output>
      反色:<output id='5'>0</output>
      透明度:<output id='6'>0</output>
      亮度:<output id='7'>0</output>
      对比度:<output id='8'>0</output>
      模糊:<output id='9'>0</output>
      <br />
      阴影x偏移量:<output id='10'>0</output>
      阴影y偏移量:<output id='11'>0</output>
      阴影距离:<output id='12'>0</output>
      阴影颜色:<output id='13'>0</output>
      </td>
    </tr>
    <tr>
      <td colspan="10">
        /*已用chorme49.0版本，Mozilla Firefox45.0测试可用！*/
      </td>
    </tr>
  </table>
</div>
</body>
</html>

JS代码(index.js):

// JavaScript Document/*js代码比较繁琐大部分重复的可以简化为一个方法*/
 var grayscale=0;
	var sepia=0;
	var saturate=1;
	var huerotate=0;
	var invert=0;
	var opacity=1;
	var brightness=1;
	var contrast=1;
	var blurvalue=0;
	var dropshadowx=0;
	var dropshadowy=0;
	var dropshadowl=0;
	var dropshadowcolor="#fff";
	function stylea(){
	document.getElementsByName('button').item(1).className="losefocus";
	document.getElementsByName('button').item(2).className="losefocus";
	document.getElementsByName('button').item(3).className="losefocus";
	document.getElementsByName('button').item(4).className="losefocus";
	document.getElementsByName('button').item(5).className="losefocus";
	document.getElementsByName('button').item(6).className="losefocus";
	document.getElementsByName('button').item(7).className="losefocus";
	document.getElementsByName('button').item(8).className="losefocus";
	document.getElementsByName('button').item(9).className="losefocus";
	document.getElementsByName('button').item(0).className="losefocus";
}
function css3_filter(id){
	stylea();
	var button=document.getElementById(id);
	button.className="onclick";
	sum();
	var img=document.getElementsByTagName('img').item(0);
	var value=document.getElementById('value');
	switch(id){
	case 'grayscale':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('output');
	p.value=grayscale;
	p.id="output";
	input.setAttribute('type','range');
	input.setAttribute('max','1');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','grayscaleclick(this.value)');
	input.setAttribute('way','grayscale');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'sepia':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('output');
	p.value=sepia;
	p.id="output" input.setAttribute('type','range');
	input.setAttribute('max','1');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','sepiaclick(this.value)');
	input.setAttribute('way','sepia');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'saturate':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('input');
	p.type="number";
	p.value=saturate;
	p.id="output";
	p.setAttribute('way','saturatetext');
	p.setAttribute('oninput','saturateclick(this.value)');
	input.setAttribute('type','range');
	input.setAttribute('max','50');
	input.setAttribute('min','0');
	input.setAttribute('step','1');
	input.setAttribute('onchange','saturateclick(this.value)');
	input.setAttribute('way','saturate');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'hue-rotate':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('input');
	p.type="number";
	p.value=saturate;
	p.id="output";
	p.setAttribute('way','huerotatetext');
	p.setAttribute('oninput','huerotateclick(this.value)');
	input.setAttribute('type','range');
	input.setAttribute('max','50');
	input.setAttribute('min','0');
	input.setAttribute('step','1');
	input.setAttribute('onchange','huerotateclick(this.value)');
	input.setAttribute('way','huerotate');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'invert':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('output');
	p.value=invert;
	p.id="output";
	input.setAttribute('type','range');
	input.setAttribute('max','1');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','invertclick(this.value)');
	input.setAttribute('way','invert');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'opacity':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('output');
	p.value=invert;
	p.id="output";
	input.setAttribute('type','range');
	input.setAttribute('max','1');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','opacityclick(this.value)');
	input.setAttribute('way','opacity');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'brightness':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('input');
	p.type="number";
	p.value=brightness;
	p.id="output";
	p.setAttribute('way','brightnesstext');
	p.setAttribute('oninput','brightnessclick(this.value)');
	input.setAttribute('type','range');
	input.setAttribute('max','100');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','brightnessclick(this.value)');
	input.setAttribute('way','brightness');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'contrast':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('input');
	p.type="number";
	p.value=brightness;
	p.id="output";
	p.setAttribute('way','contrasttext');
	p.setAttribute('oninput','contrastclick(this.value)');
	input.setAttribute('type','range');
	input.setAttribute('max','100');
	input.setAttribute('min','0');
	input.setAttribute('step','0.01');
	input.setAttribute('onchange','contrastclick(this.value)');
	input.setAttribute('way','contrast');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'blur':value.innerHTML="";
	var input=document.createElement('input');
	var p=document.createElement('output');
	p.value=blurvalue;
	p.id="output" input.setAttribute('type','range');
	input.setAttribute('max','100');
	input.setAttribute('min','0');
	input.setAttribute('step','1');
	input.setAttribute('onchange','blurclick(this.value)');
	input.setAttribute('way','blur');
	value.appendChild(input);
	value.appendChild(p);
	break;
	case 'drop-shadow':value.innerHTML="";
	var px=document.createElement('output');
	var py=document.createElement('output');
	var pl=document.createElement('output');
	var pc=document.createElement('output');
	px.value="x偏移：";
	py.value="y偏移：";
	pl.value="长度：";
	pc.value="颜色：";
	var inputx=document.createElement('input');
	var inputy=document.createElement('input');
	var inputl=document.createElement('input');
	var inputc=document.createElement('input');
	inputx.setAttribute('type','number');
	inputy.setAttribute('type','number');
	inputl.setAttribute('type','number');
	inputc.setAttribute('type','color');
	inputx.setAttribute('oninput','dropshadowclickx(this.value)');
	inputy.setAttribute('oninput','dropshadowclicky(this.value)');
	inputl.setAttribute('oninput','dropshadowclickl(this.value)');
	inputc.setAttribute('onchange','dropshadowclickc(this.value)');
	value.appendChild(px);
	value.appendChild(inputx);
	value.appendChild(py);
	value.appendChild(inputy);
	value.appendChild(pl);
	value.appendChild(inputl);
	value.appendChild(pc);
	value.appendChild(inputc);
	break;
	case 'img':grayscale=0;
	sepia=0;
	saturate=1;
	huerotate=0;
	invert=0;
	opacity=1;
	brightness=1;
	contrast=1;
	blurvalue=0;
	dropshadowx=0;
	dropshadowy=0;
	dropshadowl=0;
	dropshadowcolor="#fff";
	value.innerHTML="";
	stylea();
	sum();
	break;
}
}
function sepiaclick(value){
	sepia=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=sepia;
}
function grayscaleclick(value){
	grayscale=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=grayscale;
}
function saturateclick(value){
	saturate=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=saturate;
}
function huerotateclick(value){
	huerotate=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=huerotate;
}
function invertclick(value){
	invert=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=invert;
}
function opacityclick(value){
	opacity=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=opacity;
}
function brightnessclick(value){
	brightness=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=brightness;
}
function contrastclick(value){
	contrast=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=contrast;
}
function blurclick(value){
	blurvalue=value;
	var img=document.getElementsByTagName('img').item(0);
	sum();
	document.getElementById('output').value=blurvalue;
}
function dropshadowclickx(x){
	dropshadowx=x;
	sum();
}
function dropshadowclicky(y){
	dropshadowy=y;
	sum();
}
function dropshadowclickl(l){
	dropshadowl=l;
	sum();
}
function dropshadowclickc(c){
	dropshadowcolor=c;
	sum();
}
function dropshadowclick(){
	var img=document.getElementsByTagName('img').item(0);
	img.style.filter="drop-shadow("+dropshadowx+"px "+dropshadowy+"px "+dropshadowl+"px "+dropshadowcolor+")";
}
function sum(){
	var img=document.getElementsByTagName('img').item(0);
	img.style.filter="grayscale("+grayscale+") sepia("+sepia+") saturate("+saturate+") hue-rotate("+huerotate+"deg) invert("+invert+") opacity("+opacity+") brightness("+brightness+") contrast("+contrast+") blur("+blurvalue+"px) drop-shadow("+dropshadowx+"px "+dropshadowy+"px "+dropshadowl+"px "+dropshadowcolor+")";
	img.style.webkitFilter="grayscale("+grayscale+") sepia("+sepia+") saturate("+saturate+") hue-rotate("+huerotate+"deg) invert("+invert+") opacity("+opacity+") brightness("+brightness+") contrast("+contrast+") blur("+blurvalue+"px) drop-shadow("+dropshadowx+"px "+dropshadowy+"px "+dropshadowl+"px "+dropshadowcolor+")";
	showvalue();
}
window.onload=function(){
	showvalue();
}
var $=function(id){
	return document.getElementById(id);
}
function showvalue(){
	$('1').value=grayscale;
	$('2').value=sepia;
	$('3').value=saturate;
	$('4').value=huerotate;
	$('5').value=invert;
	$('6').value=opacity;
	$('7').value=brightness;
	$('8').value=contrast;
	$('9').value=blurvalue;
	$('10').value=dropshadowx;
	$('11').value=dropshadowy;
	$('12').value=dropshadowl;
	$('13').value=dropshadowcolor;
}

CSS代码(index.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;}
body{width:100%;height:100%;background:rgb(70,70,70);background:-moz-linear-gradient(top,rgb(70,70,70) 0%,rgb(120,150,130) 50%,rgb(70,70,70) 100%);}
img{width:100%;height:auto;}
div{width:500px;margin:350px auto 0 auto;border:1px solid #fff;transform:translate(-50%,-50%);}
table{width:100%;border:1px solid #FFF;}
td{background-color:rgba(120,150,200,.5);text-align:center;font-size:20px;color:#222;font-weight:100;}
table tr:nth-of-type(1) td{width:10%;height:100px;cursor:pointer;border-bottom:3px solid #fff;}
table tr:nth-of-type(1) td:hover{background-color:rgb(70,70,70);box-shadow:10px 10px 5px #000 inset;color:#ccc;}
.onclick{background-color:rgb(70,70,70);box-shadow:10px 10px 5px #000 inset;color:#ccc;}
.losefocus{}
table tr:nth-child(2) td{background-color:#ccc;width:10%;height:70px;font-size:20px;color:#666;}
table tr:nth-child(2) td input[type=range]{width:70%;color:#000;}
table tr:nth-child(2) td input[type=number]{width:50px;color:#000;}
table tr:nth-child(2) td input[way=saturatetext]{width:50%;}
table tr:nth-child(2) td input[way=huerotatetext]{width:50%;}
table tr:nth-child(2) td input[way=brightnesstext]{width:50%;}
table tr:nth-child(2) td input[way=contrasttext]{width:50%;}
/*img[way=grayscale]{-webkit-filter:grayscale(1);filter:grayscale(1);}
img[way=sepia]{-webkit-filter:sepia(1);filter:sepia(1);}
img[way=saturate]{-webkit-filter:saturate(3);filter:saturate(3);}
img[way=hue-rotate]{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg);}
img[way=invert]{-webkit-filter:invert(1);filter:invert(1);}
img[way=opacity]{-webkit-filter:opacity(.2);filter:opacity(.2);}
img[way=brightness]{-webkit-filter:brightness(.5);filter:brightness(.5);}
img[way=contrast]{-webkit-filter:contrast(2);filter:contrast(2);}
img[way=blur]{-webkit-filter:blur(3px);filter:blur(3px);}
img[way=drop-shadow]{-webkit-filter:drop-shadow(5px 5px 5px #ccc);filter:drop-shadow(5px 5px 5px #ccc);}
img[way=img]{-webkit-filter:;filter:;}
以上是滤镜效果使用方法示例*/
table tr:nth-child(3) td{background:#ccc;width:10%;height:30px;border-top:3px solid #333;font-size:10px;cursor:pointer;color:#666;}
table tr:nth-child(4) td{background:#ccc;width:10%;height:25px;font-size:16px;border-top:1px solid #fff;color:#666;}

附件:下载该文件资源,减少时间成本(增值服务)