我需要一种方法来实现这种效果
顶部的照片是将要作为输入的照片。我已经尝试过，但似乎无法使用任何网络过滤器，解决方案可能是我们使用 Canvas 。问题只是我必须有使用 Canvas 的经验。 此外，用户是否可以使用 slider 与对比度进行交互？
图像将通过一个简单称为url 的链接输入。
最佳答案
除非有一些我看不到的约束，否则您不需要使用 Canvas 。您可以通过在 CSS 中组合灰度和对比度滤镜来做到这一点，如下所示:
img {
过滤器:灰度(100%)对比度(10000%)；
}
将 contrast 移动到 100% 以上可以实现高对比度，而 100% 是图像的自然对比度。这里使用的数字只是一个任意大的值。您可以测试并查看最适合您的方法。
这是您的图像的笔来演示:
http://codepen.io/denmch/pen/b20ef5302b9f64fd8c5a82e49ab2f980
使用 JS 可以更新值，但更高级一些。您可以在这支笔中看到类似的东西，其中可以使用 slider 修改诸如图像模糊之类的值:
http://codepen.io/denmch/pen/MbqWEb
这是基于 Wes Bos 的免费 JavaScript 30 类(class)的第三课:
那将是开始如何操纵这些值的好地方。
关于javascript - 高对比度图像过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43700336/