Javascript 高对比度图像滤波器

我需要一种方法来达到这个效果

上面的照片是将要输入的内容。我已经尝试过了，但似乎不可能使用任何web过滤器，解决方案很可能是使用画布。问题是我必须有使用画布的经验。 此外，用户是否可以使用滑块与对比度交互

---

图像将通过一个名为

url

的链接输入

除非有我看不到的约束，否则您不应该使用canvas。您可以通过组合CSS中的灰度和对比度过滤器来实现这一点，如下所示：

img{
滤镜：灰度（100%）对比度（10000%）；
}

将

对比度

移动到100%以上可以实现高对比度，而100%是图像的自然对比度。这里使用的数字只是一个任意大的值。你可以测试，看看什么最适合你

这是一支笔，用来展示你的形象：

使用JS更新值是可能的，但更高级一些。您可以在这支笔中看到类似的内容，可以使用滑块修改图像模糊之类的值：

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

---

这将是一个很好的开始如何操作这些值的地方。

CamanJS可用于画布操作。