带对比度滤波器的输入范围答案

【问题标题】：Input range with contrast filter带对比度滤波器的输入范围
【发布时间】：2016-04-10 00:00:56
【问题描述】：

我尝试创建input ranger 以在 div 中应用对比度过滤器：

但它不起作用

感谢您的帮助

$('#contrast').on('input', function() {
  $('#mydiv').css('contrast', $(this).val() + "%");
});

#mydiv {
  width: 400px;
  height: 400px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

<div id="mydiv"></div>

Contrast
<input id="contrast" type="range" value="opacity_fundo" max="1" min="0" step="0.01" />
<br>

【问题讨论】：

标签： jquery css input range

【解决方案1】：

CSS 中没有 contrast 属性。您可能正在寻找CSS3 filter property。

由于这个属性isn't supported in all browsers，您需要添加一些前缀属性以获得额外的浏览器支持。我添加了 -webkit 前缀，以便它可以在 Chrome/Safari 中使用。浏览器支持见this chart。

根据 filter property 的 MDN 文档，您可以传递百分比或小数。 input 元素返回一个小数，这意味着您可以简单地使用小数，或者您可以将小数乘以 100 并四舍五入（即 Math.round(this.value * 100)）。

除非另有说明，采用百分号表示的值（如 34%）的函数也接受以小数表示的值（如 0.34）。

附带说明一下，我还将input 元素范围的值默认设置为1（因为图像的对比度为1）。

Updated Example

$('#contrast').on('input', function() {
  $('#mydiv').css({
    '-webkit-filter': 'contrast(' + this.value + ')',
    'filter': 'contrast(' + this.value + ')'
  });
});

不用 jQuery 也很简单：

Example Here

document.getElementById('contrast').addEventListener('input', function (e) {
  var element = document.getElementById('mydiv');

  element.style.webkitFilter = 'contrast(' + this.value + ')';
  element.style.filter = 'contrast(' + this.value + ')';
});

document.getElementById('contrast').addEventListener('input', function (e) {
  var element = document.getElementById('mydiv');
      
  element.style.webkitFilter = 'contrast(' + this.value + ')';
  element.style.filter = 'contrast(' + this.value + ')';
});

#mydiv {
  width: 200px;
  height: 200px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

<div id="mydiv"></div>

<label>Contrast:
  <input id="contrast" type="range" value="1" max="1" min="0" step="0.01" />
</label>

【讨论】：

谢谢它完美的工作。我也感谢您的精彩解释
jsfiddle.net/jy640ng1/2 不知道为什么在使用模糊之后对比度值会丢失
@Zeli 它不起作用，因为您每次都覆盖 filter 属性。您需要堆叠像'filter': 'blur(' + blur + 'px) contrast(' + contrast + ')' 这样的值，请参阅此updated example - jsfiddle.net/zpqkyytp
当我下载图像时 html2Canvas 无法识别过滤器显示没有过滤器。您已经知道任何解决方案了吗？我的问题：stackoverflow.com/questions/34684048/…

【解决方案2】：

我的版本：https://jsfiddle.net/ckekj8dn/2/

$('#contrast').on('input', function() {
    var contrast = $(this).val();
    $('#mydiv').css({
        'filter': 'contrast(' + contrast + ')',
      '-webkit-filter': 'contrast(' + contrast + ')'
    });
});

Chrome、Safari 需要 -webkit-filter。

检查这个：https://css-tricks.com/almanac/properties/f/filter/

【讨论】：

【解决方案3】：

见https://jsfiddle.net/unuwg0q6/1/

$('#contrast').on('input', function() {
    $('#mydiv').css('filter', 'contrast(' + $(this).val()  + ")");
});

你需要使用filter css来改变对比度。

【讨论】：