如何用CSS过滤器和jQuery创建一个简单的图像编辑器

CSS过滤器属性用于编辑图像或视觉效果，不需要任何专业软件。CSS过滤器工作时有一个默认值，所以它们不为用户提供任何改变强度的控制。jQuery动态地改变CSS过滤器的强度值，从而让用户完全控制图像。

语法:

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

例子：这里是你如何将50%的模糊滤镜应用于一个元素。

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

图像过滤器：要创建一个图像过滤器，我们有输入变量的滑块，通过jQuery传递每个过滤器的强度值，该过滤器将通过CSS应用。

项目结构:

如何用CSS过滤器和jQuery创建一个简单的图像编辑器？

File structure

例子：在这个例子中，我们将通过使用Demo.html文件中的HTML来设计结构。之后，我们将通过使用Demo.css文件中的CSS来使用过滤器，然后使用Demo.js文件中的JavaScript来提供对这些过滤器的控制。

<!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>

/** @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;
}

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

输出:

如何用CSS过滤器和jQuery创建一个简单的图像编辑器？