JavaScript 实现图片模糊效果：拖动滑块控制清晰度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
<pre><code> body{
background-image:url("https://jsmov2.a.yximgs.com/ufile/atlas/NTI0NjY5MzY3NTEzNTQ2NjMwOV8xNjkxMDYzMTUxNTkzXzEx.jpg");
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
#ouy{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* 从父元素继承 background 属性的设置 */
background: inherit;
/*背景模糊*/
filter: blur(1px);
z-index:-1;
}
#preview{
max-width:80%;
}
</style>
</code></pre>
</head>
<body id="body">
<div id="ouy"></div>
<input type="file" />
<input id="range" style="width:80%" type="range" value="50">
<img src="" id="preview" alt=""/>
<script>
var inp = document.querySelector("input");
range.oninput = function(){
//alert(range.value);
ouy.style.filter=`blur(${range.value/10}px)`;
}
inp.onchange = function(){
var file = inp.files[0];
var reader = new FileReader();
reader.onload = (e) =>{
body.style.backgroundImage = `url(${e.target.result})`;
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>拖动的时候往左边拖的时候变清晰内容：你可以使用以下代码来实现向左拖动时图像变清晰的效果：
<pre><code class="language-javascript">range.oninput = function(){
if(range.value < 50){
ouy.style.filter=`blur(${(50 - range.value)/10}px)`;
} else {
ouy.style.filter=`blur(0px)`;
}
}
</code></pre>
<p>这段代码会根据滑块的值来改变背景图像的模糊效果。当滑块值小于50时，将模糊值设置为<code>(50 - range.value)/10</code>，即越小值越大，图像越清晰。当滑块值大于等于50时，将模糊值设置为0，即图像完全清晰。</p>
原文地址: https://www.cveoy.top/t/topic/qhvM 著作权归作者所有。请勿转载和采集!