使用 jQuery 逐渐模糊图像答案

【问题标题】：Blur the Image Gradually using jQuery使用 jQuery 逐渐模糊图像
【发布时间】：2012-03-05 22:59:03
【问题描述】：

我有一张图片，我想为它设置一些初始模糊。根据用户的某些操作，我希望图像能够将其模糊度降低一些。是否有任何 jQuery 插件可以让您处理模糊半径或类似的东西？

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

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

【问题讨论】：

【解决方案1】：

任何 javascript 都将仅用于客户端 - 如果用户禁用 javascript 或在图像已加载且 javascript 尚未运行时，图像将可以清晰查看。

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

【讨论】：

【解决方案2】：

它使用StackBlur逐渐模糊图像。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

现在可以在没有 Javascript 的情况下完成这项工作，通常只需要 CSS。

例如。

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

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

【讨论】：