如何实现图片反向blur效果：range滑块值增大时模糊度递减

核心逻辑是做数值反向映射：滑块取值范围0_{20对应模糊度20px}0px，滑块拉满时模糊值为0即完全清晰，滑块在0位时模糊值为20px即最大模糊。
需要修改2处位置：

• 调整img初始filter属性，和滑块初始值0对应的最大模糊状态匹配
• 修改模糊值计算逻辑，用最大模糊阈值减去当前滑块值，得到实际生效的blur参数

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <style>
        img {
            width: 300px;
            height: 400px;
            /* 初始状态对应滑块值0，设置为最大模糊20px */
            filter: blur(20px);
        }

        .conteneur {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        [type=range] {
            margin: 5px;
        }
    </style>
    <script>
        function modifierPhoto(x) {
            // 反向计算模糊值：滑块值越大，blur值越小
            const blurValue = 20 - Number(x);
            document.getElementById("photo").style.filter = "blur(" + blurValue + "px)";
        }
    </script>
</head>

<body>
    <div class="conteneur">
        <h1>Effet Blur()</h1>
        <img src="hien.jpg" id="photo">
        <br><br><br>
        0<input type="range" min=0 max=20 value=0 oninput="modifierPhoto(this.value)">20
    </div>
</body>

</html>

提示：如果需要调整最大模糊程度，只需要把代码里两处20替换成你想要的最大模糊像素值即可，保证计算逻辑和初始值一致就不会出现状态错位。

内容的提问来源于stack exchange，提问作者PL lema