How to Create a Simple Image Editor with CSS Filters and jQuery ?

Last Updated : 01 Aug, 2024

CSS filter property is used to edit images or visual effects without the need for any specialized software. CSS filters work with a default value, so they don't offer users any control in changing their intensity.jQuery changes the value of intensity in CSS filters dynamically and thus gives the user complete control over the image.

Syntax:

.demo {
    filter: <filter-function> [<filter-intensity>];
}

Example: Here’s how would you apply a 50% blur filter to an element.

.demo {
    filter: blur(50%);
}

Image filter: To create an image filter, we have sliders for input variables that pass the value for intensity of each filter via jQuery and that filter will be applied through CSS.

Project Structure:

Example: In this example, we will design the structure by using the HTML in demo.html file. After that we will use the filter by using CSS in demo.css file and then provide the control of those filters using JavaScript in demo.js file.

demo.html

<!DOCTYPE html>
<html>

<head>
    <!-- Add CSS file -->
    <link rel="stylesheet" href="demo.css" />

    <!-- Add JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <!-- Add JavaScript file -->
    <script>
        $(document).ready(function () {
            $(".fit-val").change(main);
        });
    </script>

    <script src="demo.js"></script>
</head>

<body>
    <div id="main">
        <!-- Add Slider Controls -->
        <div class="range_panel">
            <span>
                <label>GrayScale</label>
                <br />
                <input id="id1" class="fit-val" 
                    type="range" min="0" max="100" 
                    value="0" />
            </span>

            <span>
                <label>Blur</label>
                <br />
                <input id="id2" class="fit-val" 
                    type="range" min="0" max="10" 
                    value="0" />
            </span>

            <span>
                <label>Exposure</label>
                <br />
                <input id="id3" class="fit-val" 
                    type="range" min="0" max="200" 
                    value="100" />
            </span>

            <span>
                <label>Sepia</label>
                <br />
                <input id="id4" class="fit-val" 
                    type="range" min="0" max="100" 
                    value="0" />
            </span>

            <span>
                <label>Opacity</label>
                <br />
                <input id="id5" class="fit-val" 
                    type="range" min="0" max="100"
                    value="100" />
            </span>

            <span>
                <label>Contrast</label>
                <br />
                <input id="id6" class="fit-val" 
                    type="range" min="0" max="100"
                    value="100" />
            </span>

            <span>
                <label>Invert</label>
                <br />
                <input id="id7" class="fit-val"
                    type="range" min="0" max="100"
                    value="0" />
            </span>

            <span>
                <label>Saturate</label>
                <br />
                <input id="id8" class="fit-val" 
                    type="range" min="0" max="100" 
                    value="100" />
            </span>
        </div>
        
        <div class="image">
            <img src="demo.png" />
            <img src="demo.png" class="image_main" />
        </div>
    </div>
</body>

</html>

demo.css

/** @format */

body {
    text-align: center;
    color: white;
}
.main {
    width: 100vw;
    display: flex;
}
.range_panel {
    background-color: rgb(39, 39, 39);
    width: 300px;
    height: 100vh;
    padding: 30px;
    padding-top: 100px;
}
span {
    display: block;
    margin: 10px;
}
.image {
    padding: 100px;
}
.image img {
    width: 30vw;
}

demo.js

function main() {
    $(".image_main").css(
        "-webkit-filter",
        "grayscale(" +
        $("#id1").val() +
        "%)    blur(" +
        $("#id2").val() +
        "px) brightness(" +
        $("#id3").val() +
        "%) sepia(" +
        $("#id4").val() +
        "%) opacity(" +
        $("#id5").val() +
        "%)    contrast(" +
        $("#id6").val() +
        "%) saturate(" +
        $("#id7").val() +
        "%) invert(" +
        $("#id8").val() +
        "%)"
    );
}

Output:

How to Create a Photo Slideshow with fadeIn and fadeOut using jQuery ?

mishrapriyank17

Improve

Article Tags :

How to Create a Simple Image Editor with CSS Filters and jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?