如何使用 javascript 和 html 滑块（不使用画布）更改图像的对比度

【问题标题】：How can I change contrast of an image by using javascript and html slider (not using canvas)如何使用 javascript 和 html 滑块（不使用画布）更改图像的对比度
【发布时间】：2017-05-10 08:13:46
【问题描述】：

作为标题，我想使用 html 和 javascript（或 jQuery、CSV、...）创建一个滑块来更改图像的对比度。喜欢this 话题。但是，我不想在 HTML5 中使用 Canvas。

有什么办法吗？

【问题讨论】：

您是否正在创建一个用于控制图像对比度的滑块？
@azs06：是的。你能帮帮我吗？
你想要这样的jsfiddle.net/azs06/5ah3zh3s/5

标签： javascript jquery slider contrast

【解决方案1】：

您可以使用 CSS 过滤器：

-webkit-filter: contrast(200%);

只需获取 HTML 滑块的值并将对比度过滤器应用于您的图像

【讨论】：

我做了你的建议。但是，当我更改为对比度（0%）时，图像的颜色是灰色（不像 w3schools 中关于对比度的文档那样完全黑色：0% 会使图像完全变黑。此外，-webkit-filter 在 IE 上不起作用，虽然我尝试了这些前缀：-ms-、-moz-、-o-、过滤器。我不知道为什么。