css+js实现图片滤镜生成器代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css+js实现图片滤镜生成器代码，可选择左侧不同的参数实时观看右侧效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
  
<style>
body {
        background: #f5f5f5;
        font-family: "Plus Jakarta Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
        font-weight: 700;
}

.gallery {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
}

.container {
        display: flex;
        justify-content: center;
        gap: 20px;
}

.filter-range {
        display: flex;
        flex-direction: column;
        align-items: center;
}

#svg-filters {
        position: absolute;
}

.card {
        margin-top: 24px;
        margin-bottom: 24px;
        border-radius: 24px;
        padding: 24px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        border: none;
}

#search {
        border-radius: 24px;
        border: none;
        padding: 12px;
        float: right;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.full {
        width: 100%;
        position: relative;
        height: 600px;
        background: #f5f5f5;
        border-radius: 24px;
        overflow: hidden;
}

#image {
        object-fit: cover;
        width: 100%;
        object-position: center bottom;
}

.card h5 {
        margin-bottom: 24px;
}

.buttons {
        margin-bottom: 24px;
}

.btn {
        border-radius: 24px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
                rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        margin: 4px;
}
</style>


  
  
</head>


  <body>
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
                <h1>Filter Generator</h1>
        </header>
        <div class="container-sm">
                <div class="row">
                        <div class="col">
                                <div class="row d-flex justify-content-center ">
                                        <div class="col-4 my-auto">
                                                <h2>Filters</h2>
                                        </div>
                                        <div class="col-8 my-auto">
                                                <input type="text" id="search" placeholder="Search filters...">
                                        </div>
                                </div>
                                <div class="card">
                                        <div class="card-body">
                                                <h5 class="card-title">CSS Filters</h5>
                                                <div class="buttons">
                                                        <button class="btn btn-danger" id="resetStyle">Reset All</button>
                                                        <button class="btn btn-light" id="brightStyle">Bright</button>
                                                        <button class="btn btn-light" id="oldStyle">Old</button>
                                                        <button class="btn btn-light" id="rawStyle">Raw</button>
                                                        <button class="btn btn-light" id="nuclearStyle">Nuclear</button>
                                                        <button class="btn btn-light" id="creepyStyle">Creepy</button>
                                                </div>
                                                <div class="filter-range" data-filter-name="greyscale">
                                                        <label for="greyscale" class="form-label">Greyscale:<span id="greyscale-value">0%</span></label>
                                                        <input type="range" value="0" class="form-range" min="0" max="100" id="greyscale">
                                                </div>
                                                <div class="filter-range" data-filter-name="sepia">
                                                        <label for="sepia" class="form-label">Sepia:<span id="sepia-value">0%</span></label>
                                                        <input type="range" value="0" class="form-range" min="0" max="100" id="sepia">
                                                </div>
                                                <div class="filter-range" data-filter-name="blur">
                                                        <label for="blur" class="form-label">Blur:<span id="blur-value">0%</span></label>
                                                        <input type="range" value="0" class="form-range" min="0" max="100" id="blur">
                                                </div>
                                                <div class="filter-range" data-filter-name="brightness">
                                                        <label for="brightness" class="form-label">Brightness:<span id="brightness-value">0%</span></label>
                                                        <input type="range" value="100" class="form-range" min="0" max="200" id="brightness">
                                                </div>
                                                <div class="filter-range" data-filter-name="hue rotate">
                                                        <label for="huerotate" class="form-label">Hue Rotate:<span id="huerotate-value">0%</span></label>
                                                        <input type="range" value="0" class="form-range" min="0" max="360" id="huerotate">
                                                </div>
                                                <div class="filter-range" data-filter-name="saturate">
                                                        <label for="saturate" class="form-label">Saturate:<span id="saturate-value">0%</span></label>
                                                        <input type="range" value="100" class="form-range" min="0" max="1000" id="saturate">
                                                </div>
                                                <div class="filter-range" data-filter-name="opacity">
                                                        <label for="opacity" class="form-label">Opacity:<span id="opacity-value">0%</span></label>
                                                        <input type="range" value="100" class="form-range" min="0" max="100" id="opacity">
                                                </div>
                                                <div class="filter-range" data-filter-name="contrast">
                                                        <label for="contrast" class="form-label">Contrast:<span id="contrast-value">.........完整代码请登录后点击上方下载按钮下载查看