Reverse blur effect on picture input

Question

hello ive tried many things but can't get thing to work for me i have a range input with a blur effet on picture from 0 to 20 and i would like it to start with blur effect and decrease blur when the range increase from 0 to 20.

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <style>
        img {
            width: 300px;
            height: 400px;
            filter: blur(0px);
        }

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

        [type=range] {
            margin: 5px;
        }
    </style>
    <script>
        function modifierPhoto(x) {
            document.getElementById("photo").style.filter = "blur(" + x + "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>

Answer 1

You need to have 20px blur initially. And then you can decrease blur from 20 as the range increases.

img {
  filter: blur(20px);
}

// You need to convert x to integer/float first before subtracting it from 20.

document.getElementById("photo").style.filter = "blur(" + (20-parseInt(x, 10)) + "px)";

Reverse blur effect on picture input

Question

1 answers

solution1
0 2022-06-21 13:42:03

Reverse blur effect on picture input

Question

1 answers

solution1 0 2022-06-21 13:42:03

solution1
0 2022-06-21 13:42:03