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

📅  最后修改于: 2021-11-25 04:26:53             🧑  作者: Mango

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


  

    
    
  
    
    
  
    
    
  
    

  

    
                 
                                              
                             
                                                 
                             
                                                 
                             
                                                 
                             
                                                 
                             
                                                 
                             
                                                 
                             
                                                 
                             
        
                   
                                  
    
  


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


演示文件

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

输出:

输出