如何使用JavaScript創建圖像效果濾鏡面板？

Question

我想在面板下面建立像這樣的Image Filter Panel。

創建此面板是否有任何JavaScript庫支持？
（特別是當我們移動“密集”滑塊時，所有其他滑塊都會自動滑動）

謝謝！

Answer 1

那樣的東西？？？

請在寬屏中觀看

 $('.filter input[type=range]').on('input change', function() { $('img').css({ '-webkit-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)', '-moz-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)', '-o-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)', '-ms-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)', }); }); $('.transformation input[type=range]').on('input change', function() { $('img').css({ '-ms-transform': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)', '-webkit-transform': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)', 'transform ': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)' }); }); 

 body { font-family: Helvetica; color: #2c3e50; } .wrapper { display: table; width: 100%; } .wrapper-content { display: table-cell; width: 50%; vertical-align: top; } .filter, .transformation { display: table; width: 100%; } label { display: table-cell; width: 20%; padding-right: 10px; text-align: right; line-height: 28px; } input { vertical-align: middle; display: table-cell; width: 80%; } img { max-height: 620px; max-width: 620px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="wrapper-content"> <div class="filter"> <label>Blur:</label> <input type="range" id="blur" value="0" min="0" max="4" step="0.01" /> </div> <div class="filter"> <label>Brightness:</label> <input type="range" id="brightness" value="1" min="0" max="1" step="0.01" /> </div> <div class="filter"> <label>Saturate:</label> <input type="range" id="saturate" value="100" min="0" max="200" /> </div> <div class="filter"> <label>Hue:</label> <input type="range" id="hue-rotate" value="0" min="0" max="360" /> </div> <div class="filter"> <label>Contrast:</label> <input type="range" id="contrast" value="100" min="0" max="200" /> </div> <div class="filter"> <label>Invert:</label> <input type="range" id="invert" value="0" min="0" max="100" /> </div> <div class="filter"> <label>Grayscale:</label> <input type="range" id="grayscale" value="0" min="0" max="100" /> </div> <div class="filter"> <label>Sepia:</label> <input type="range" id="sepia" value="0" min="0" max="100" /> </div> <br /> <div class="transformation"> <label>Rotate:</label> <input type="range" id="rotate" value="0" min="-360" max="360" /> </div> <div class="transformation"> <label>Scale (x):</label> <input type="range" id="scale-x" value="1" min="-4" max="4" step="0.1" /> </div> <div class="transformation"> <label>Scale (y):</label> <input type="range" id="scale-y" value="1" min="-4" max="4" step="0.1" /> </div> <div class="transformation"> <label>Translate (x):</label> <input type="range" id="translate-x" value="0" min="-80" max="80" /> </div> <div class="transformation"> <label>Translate (y):</label> <input type="range" id="translate-y" value="0" min="-80" max="80" /> </div> <div class="transformation"> <label>Skew:</label> <input type="range" id="skew" value="0" min="-360" max="360" /> </div> </div> <div class="wrapper-content"> <img src="http://patricktayloredwards.com/images/background.8fcc83c6.jpg" /> </div> </div>