javascript - 如何在不支持 CSS3 过滤器的浏览器中模糊图像

Question

图像模糊是我网站上的主要美学特征之一。到目前为止，我正在使用 CSS3 过滤器 blur() 创建模糊，但我知道 Firefox 和 Internet Explorer 都不支持此功能。我想知道是否有替代方案，也许是 JavaScript/jQuery，它可以帮助我创建我正在寻找的模糊效果？

Answer 1

看看blur.js（一个 jQuery 插件）是否能帮到你。本质上，它所做的是将您的图像移动到 a <canvas>，并在那里进行模糊效果。请参阅有关该主题的更全面的文章：网络效果！.

Answer 2

有很多 JS 库可以模糊图像。

• 模糊JS
• VagueJS
• StackBlur 算法

无论如何，如果您使用的是静态模糊图像（即，无需再次取消模糊/模糊它），我会说您应该使用普通的位图图像。这可能有助于避免浏览器上不必要的 CPU 负载和兼容性问题。