我需要一种方法来达到这种效果
最上面的照片是输入内容。我已经尝试过了，使用任何Web过滤器似乎都不可行，该解决方案可能会妨碍我们使用画布。问题只是我必须体验使用画布。
此外，用户是否可以使用滑块与对比度进行交互？
图像将通过简称为url的链接输入。
最佳答案
除非有一些我看不到的约束，否则您不需要使用画布。您可以这样组合CSS中的灰度滤镜和对比度滤镜来实现：img { filter: grayscale(100%) contrast(10000%);}
将contrast移至100％以上可获得高对比度，而100％是图像的自然对比度。这里使用的数字只是一个任意大的值。您可以测试并查看最适合您的方法。
这是您的图片笔来演示：
http://codepen.io/denmch/pen/b20ef5302b9f64fd8c5a82e49ab2f980
使用JS可以更新值，但更高级。您可以在这支笔中看到类似的内容，其中可以使用滑块修改诸如图像模糊之类的值：
http://codepen.io/denmch/pen/MbqWEb
这是基于Wes Bos的免费JavaScript 30课程的第三课：
https://javascript30.com/
那将是开始如何操纵这些值的好地方。