CSS3 filter濾鏡屬性小專案——圖片高斯模糊、高亮、對比度、灰度、色調、色彩旋轉、透明、飽和、褐色調整
阿新 • • 發佈：2018-12-19
學到了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; }
效果圖如下：
