通过Javascript更改CSS过滤器值

Changing CSS filter values via Javascript

本文关键字：过滤器 CSS 更改 Javascript 通过      更新时间：2024-04-04

我正在开发一个非常基本的图像编辑器，但我无法使用范围输入滑块（#fx滑块）来影响实际的css过滤器值。这是代码：

function ChangeFilter() {
  var ifx = document.getElementById("canvasFrame");
  var br = document.getElementById("br");
  var ct = document.getElementById("ct");
  var st = document.getElementById("saturate");
ifx.style.WebkitFilter = "brightness(" + br.value * 10 + "%)");
ifx.style.filter = "brightness(" + br.value * 10 + "%)");
ifx.style.WebkitFilter = "contrast(" + ct.value * 10 + "%)");
ifx.style.filter = "contrast(" + ct.value * 10 + "%)");
ifx.style.WebkitFilter = "saturate(" + st.value * 10 + "%)");
ifx.style.filter = "saturate(" + st.value * 10 + "%)");
}
#canvasFrame {
  width:100px;
  height:50px;
  filter: brightness(100%) contrast(100%) saturate(100%);
  -webkit-filter: brightness(100%) contrast(100%) saturate(100%);
}
<div class="canvasFrame">
  <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt="image">
</div>
<div class="fx-slider">
  <label for="br">Brightness</label>
  <input id="br" name="br" type="range" min="0" max="200" value="100" onchange="ChangeFilter()">
</div>
<div class="fx-slider">
  <label for="ct">Contrast</label>
  <input id="ct" name="ct" type="range" min="0" max="200" value="100" onchange="ChangeFilter()">
</div>
<div class="fx-slider">
  <label for="st">Saturation</label>
  <input id="st" name="ct" type="range" min="0" max="200" value="100" onchange="ChangeFilter()">
</div>

任何帮助都将不胜感激！谢谢。：）

您需要向画布容器添加一个id，而您的饱和度控件使用了错误的id。此外，您应该连接这3个控件，否则您只需要设置饱和度级别。

function ChangeFilter() {
  var ifx = document.getElementById("canvasFrame");  //need to update this id in you html
  var br = document.getElementById("br");
  var ct = document.getElementById("ct");
  var st = document.getElementById("st");  //this id was wrong in your code
  //set all 3 filter values at once.
  ifx.style.webkitFilter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)";
  ifx.style.filter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)";
}

CodePen：http://codepen.io/nobrien/pen/BKmevp

相关文章：