使用jQuery逐渐模糊图像

Question

我有一个图像，我想为它设置一些初始模糊。 根据用户的一些动作，我希望图像减少一些量的模糊度。是否有任何jQuery插件可以让你处理模糊半径或类似的东西？

我在这里遇到过一个jQuery API http://www.pixastic.com/lib/docs/actions/blur/ 但我不认为它能够逐渐改变图像的模糊性。

需要帮助， 请建议我该怎么办？ 还有什么我可以使用的吗？ 提前完成。

Answer 1

任何javascript都只是客户端 - 如果用户禁用了javascript，或者在图片加载且javascript未运行时，可以清楚地查看该图像。

如果必须在用户选择正确答案时图像更清晰，我建议在服务器上使用不同“模糊”的图像来替换之前的图像。

Answer 2

查看本教程：http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

使用StackBlur逐渐模糊图像。

Answer 3

它可以。每次调用Pixastic.process(img, "blur");时，图像都会模糊一点，因此只需多次触发该方法即可。

现在减少模糊将会有点棘手，因为（我猜）这将涉及恢复到图像的“模糊程度较低”的缓存副本。祝你好运！

Answer 4

现在可以不用 Javascript，通常只有 CSS。

例如

backdrop-filter: blure(5px);
filter: blur(5px);

通过这种方式，您可以根据预期的结果操作 CSS 值。

见https://codepen.io/QuiteQuinn/pen/jOBxGjr。