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

Last Updated : 30 Jun, 2021

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:

File 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() + 
        "%)"
    ); 
} 