SOURCE

var tup = document.getElementById("tiimg");
var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;
// 高斯模糊
document.getElementById("gaosi").addEventListener("input",function()
{
	blur=this.value;
	flisd();
});
//黑白效果
document.getElementById("heiba").addEventListener("input",function()
{
	hbxg=this.value;
	flisd();
});
//亮度效果
document.getElementById("liang").addEventListener("input",function()
{
	liang=this.value;
	flisd();
});
//怀旧效果
document.getElementById("huaij").addEventListener("input",function()
{
	hjxg=this.value;
	flisd();
});
//反色效果
document.getElementById("fansx").addEventListener("input",function()
{
	fans=this.value;
	flisd();
});
//透明效果
document.getElementById("toum").addEventListener("input",function()
{
	tmxg=this.value;
	flisd();
});
//透明效果
document.getElementById("baof").addEventListener("input",function()
{
	baohd=this.value;
	flisd();
});
function flisd(){
	if(baohd==0){baohd=2;}
	tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) brightness("+liang+"%) sepia("+hjxg+"%)  invert("+fans+"%)  opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%)";
}

<img src="https://s0.2mdn.net/simgad/5050885756811256918" id="tiimg" style="width: 50%;"/>
<br>
<span>高斯模糊：</span><input id="gaosi" type="range"  value="0"/>
<br>
<span>黑白效果：</span><input id="heiba" type="range"  value="0"/>
<br>
<span>怀旧效果：</span><input id="huaij" type="range"   value="0"/>
<br>
<span>反色效果：</span><input id="fansx" type="range"  value="0"/>
<br>
<span>透明效果：</span><input id="toum" type="range"  value="0"/>
<br>
<span>图饱和度：</span><input id="baof" type="range"  value="0"/>
<span>亮度：</span><input id="liang" type="range"  value="100"/>