高对比度图像滤镜

Question

我需要一种方法来实现这种效果

顶部照片是输入的内容。我已经尝试过，使用任何网络过滤器似乎都没有用，解决方案可能会使用画布。问题只是我必须要使用画布。 此外，用户是否可以使用滑块与对比度进行交互？

图像将通过简称为url的链接输入。

Answer 1

除非有一些我看不到的约束，否则你不需要使用画布。您可以通过在CSS中组合灰度和对比度滤镜来实现此目的：

img { filter: grayscale(100%) contrast(10000%); }

将contrast移动到100％以上可以实现高对比度，而100％是图像的自然对比度。这里使用的数字只是一个任意大的值。您可以测试并查看哪种方法最适合您。

这是你的形象笔，用于演示：

Playground

使用JS可以更新值，但更高级。您可以在此笔中看到类似的内容，其中可以使用滑块修改图像模糊等值：

http://codepen.io/denmch/pen/b20ef5302b9f64fd8c5a82e49ab2f980

这是基于Wes Bos的免费JavaScript 30课程的第三课：

http://codepen.io/denmch/pen/MbqWEb

这是开始如何操纵这些价值的好地方。