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

CSS filter属性用于编辑图像或视觉效果，无需任何专门的软件。 CSS 过滤器使用默认值工作，因此它们不会为用户提供任何更改其强度的控制。jQuery 动态更改 CSS 过滤器中的强度值，从而使用户可以完全控制图像。

句法：

.demo {
    filter:  [];
}

示例：以下是如何将 50% 模糊过滤器应用于元素。

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

图像过滤器：为了创建图像过滤器，我们有用于输入变量的滑块，这些变量通过 jQuery 传递每个过滤器的强度值，并且该过滤器将通过 CSS 应用。

项目结构：

文件结构

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

demo.html

  

    
    
  
    
    
    
  
    
    
        $(document).ready(function () {
            $(".fit-val").change(main);
        });
    
  
    

  

    
        
        
            
                GrayScale
                
                
            
  
            
                Blur
                
                
            
  
            
                Exposure
                
                
            
  
            
                Sepia
                
                
            
  
            
                Opacity
                
                
            
  
            
                Contrast
                
                
            
  
            
                Invert
                
                
            
  
            
                Saturate
                
                
            
        
          
        
            
            
        
    

  

演示文件

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

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

输出：

输出